【Vue父子组件间通信】

父子组件通信

父传子 (props)

(1)在父组件中使用子组件时，给子组件一个自定义属性，这个属性绑定了父组件中的数据
(2)然后在子组件中用props接收自定义的属性
(3)子组件使用父组件数据

//(1)父组件中：
<Son :fatherName="name" :fatherAge="age"/>
//(2)子组件中：
props: ['fatherName','fatherAge']
//(3)子组件中：
<h3>我的父亲是{{fatherName}} 组件</h3>
<h3>我的父亲今年{{fatherAge}} 岁了</h3>

子传父 (自定义事件)

(1)在父组件中给子组件绑定自定义事件，<Son @xxx="func"/>
func是自定义事件被触发后，执行的回调（即自定义事件被触发后，父组件该做些什么）

(2)如何触发自定义事件：子组件做了某些事情后，告诉父组件，我触发了自定义事件，并捎带一些数据
(3)父组件使用子组件数据

//(1)父组件中：
<Son @getFromSon="showSon"/>

showSon(name,age) {
  console.log(`My son's name is ${name}, he is ${age} now!`);
  this.sonName = name
  this.sonAge = age
}
//(2)子组件中：
<button @click="sendToFather">点我传信息给父亲</button>

sendToFather() {
  this.$emit('getFromSon',this.name,this.age)
}
//(3)父组件中：
<h3>我的儿子是{{sonName ? sonName : '不知道'}}</h3>
<h3>我的儿子今年{{sonAge ? sonAge : '不知道多少'}} 岁了</h3>

完整代码

Father.vue:

<template>
  <div>
      <h3>我是{{name}} 组件</h3>
      <h3>我今年{{age}} 岁了</h3>
      <h3>我的儿子是{{sonName ? sonName : '不知道'}}</h3>
      <h3>我的儿子今年{{sonAge ? sonAge : '不知道多少'}} 岁了</h3>
      <br><br>
      <Son :fatherName="name" :fatherAge="age" @getFromSon="showSon"/>
  </div>
</template>

<script>
  import Son from '@/components/Son.vue'
  export default {
    name: 'Father',
    data() {
      return {
        name: 'AAA',
        age: 32,
        sonName: '',
        sonAge: 0
      }
    },
    components: { Son },
    methods: {
      showSon(name,age) {
        console.log(`My son's name is ${name}, he is ${age} now!`);
        this.sonName = name
        this.sonAge = age
      }
    }
  }
</script>

<style>

</style>

Son.vue:

<template>
  <div>
      <h3>我是{{name}} 组件</h3>
      <h3>我今年{{age}} 岁了</h3>
      <h3>我的父亲是{{fatherName}} 组件</h3>
      <h3>我的父亲今年{{fatherAge}} 岁了</h3>
      <button @click="sendToFather">点我传信息给父亲</button>
  </div>
</template>

<script>
  export default {
    name: 'Son',
    data() {
      return {
        name: 'aaa',
        age: 6
      }
    },
    props: ['fatherName','fatherAge'],
    methods: {
      sendToFather() {
        this.$emit('getFromSon',this.name,this.age)
      }
    }
  }
</script>

<style>

</style>

效果