Vue2组件间通信—子传父值自定义事件

Vue2中组件间通信系列，本篇是关于子组件向父组件传值的介绍，这里我会用通俗的语言帮助大家理解自定义事件

---

功能：

父组件可以接受到子组件传递的数据，适用于组件间通信。

---

原理：

子组件要给父组件传递数据，此时要在父组件中给子组件绑定一个自定义事件，回调写在父组件中。那么触发这个自定义事件的就是子组件，传递的参数就是子组件要给父组件传递的数据。

---

绑定自定义事件的两种方式：

• 第一种方式：

父组件：

<template>
  <div>
    <Son @show="showName" />
  </div>
</template>

<script>
import Son from './Son.vue'
export default {
  name:'Father',
  data(){
    return{
    }
  },
  methods:{
    showName(name){
      console.log(name)
    }
  },
  components:{
    Son
  }
}

子组件：

export default {
  name:'Son',
  mounted(){
    this.$emit('show',"Son子组件")
  }
}
</script>

控制台结果：

Son子组件

• 第二种方式：

父组件：

<template>
  <div>
    <Son ref="MySon"/>
  </div>
</template>

<script>
import Son from './Son.vue'
export default {
  name:'Father',
  methods:{
    ShowName(name){
      console.log(name)
    }
  },
  mounted(){
    this.$refs.MySon.$on('show',this.ShowName)
  },
  components:{
    Son
  }
}
</script>

子组件：

<template>
 <button @click="toFather">为Father传值</button>
</template>

<script>
export default {
  name:'Son',
  methods:{
    toFather(){
      this.$emit('show',"Son子组件")
    }
  },
}
</script>

控制台结果：

Son子组件

区别(小坑)：

两种方式的目的都是为了子传父值，不过在这里需要注意的是第二种方式在为子组件绑定自定义事件的时机与第一种方式不同，第二种是在整个页面挂载之后对子组件绑定自定义事件，而Vue的执行机制是子组件比父组件先进行渲染，也就是说子组件都已经渲染完毕了之后我们才给它绑定自定义事件，所以子组件中触发自定义事件的函数不可以在mounted钩子中执行。通俗点说就是子组件比父组件先进行渲染，子组件的mounted函数比父组件的先执行，在执行的时候父组件的自定义事件还没有绑定(查无此人)。所以在示例中对于第二种方式我们在子组件中用按钮去触发自定义事件。

补充：

1. 我们最好在组件销毁之前对自定义事件进行解绑，this.$off (‘自定义事件’), 这一过程可以在beforeDestroy钩子中执行
2. 对于绑定原生DOM事件也可以用native修饰符修饰 如： @click.native="…" 这样click事件就变成了原生Dom事件不会被当做自定义事件执行。
3. 注意点：对于第二种方式绑定自定义事件的回调函数要么写成命名函数的方式到methods中，要么写成箭头函数的形式，否则this指向不是组件实例。