vue中父子组件的通信

父组件：

<template>
  <div class="parent">
    <div>我是父组件，给子组件传值（传：我是父组件）----{{msg2}}</div>
    <!--在子组件上v-on来监听该事件，有变化则调用exportMsg方法-->
    <transmit-child :child-msg="msg" v-on:clickMsg="exportMsg"></transmit-child>
  </div>
</template>

<script>
import child from '@/components/child'
export default {
  name: 'parent',
  data () {
    return {
      arr: [1, 2, 3, 4],
      msg: '我是父组件',
      msg2: ''
    }
  },
  components: {
    'transmit-child': child
  },
  methods: {
    exportMsg (childValue) {
      console.log('fu')
      this.msg2 = childValue
    }
  }
}
</script>

子组件：

<template>
  <div class="child">
    <div>我是子组件</div>
    <div>{{childMsg}}</div>
    <button @click="transmit">通过事件向父组件传递消息</button>
  </div>
</template>

<script>
export default {
  name: 'child',
  data () {
    return {
      msg: '我是子组件'
    }
  },
  //  props是组件的一个单独选项，不能写在data中
  props: ['childMsg'],
  methods: {
    transmit () {
      console.log('zi')
      //  事件名称（'clickMsg'）和需要传递给父组件的值(msg)
      this.$emit('clickMsg', this.msg)
    }
  }
}
</script>

父组件传递数据给子组件。是通过子组件设置props选项中自定义属性来接收来自父组件的数据。父组件中子组件的地方使用v-bind:自定义属性（该属性必须为子组件的props的值）父组件传值则为v-bind:自定义属性（该属性必须为子组件的props的值）=‘父组件需要传的值’。
子组件通过事件触发向父组件传递消息。截取子组件methods方法代码如下：

 methods: {
    transmit () {
      console.log('zi')
      //  事件名称（'clickMsg'）和需要传递给父组件的值(msg)
      this.$emit('clickMsg', this.msg)
    }
  }

点击子组件，执行transmit方法，进而执行了this.$emit('clickMsg', this.msg)方法。第一个参数为事件名称，第二个参数为子组件中需要传递给父组件的值。在父组件中子组件的地方使用v-on:clickMsg="exportMsg"来监听子组件的事件触发。一旦触发，则会执行父组件中的exportMsg方法，方法代码如下：

  methods: {
    exportMsg (childValue) {
      console.log('fu')
      this.msg2 = childValue
    }
  }

this.$emit('clickMsg', this.msg)中的this.msg会传递给childValue进而达到传值的目的。
注意：v-on:clickMsg="exportMsg "方法后不要加括号，更不要写括号里还写参数的形式。因为子组件一般是要传值给父组件的，需要传值，只在父组件的methods方法中定义方法时，写带参数的形式即可，子组件传递过来的值会传给参数的。而在v-on:clickMsg="exportMsg "方法后加括号，则必须写传给参数的值，而该值必须为父组件中已经定义的data中得值，这里非常重要，虽可以这么写，但是，我们可以在方法中用this.来引用data中得值

vue中父子组件的通信

猜你喜欢