Vue组件通信（子传父自定义事件）

2022/6/8 vue

1.使用场景：A是父组件，B是子组件，子组件B想给父组件A传数据，那么就需要在父组件A中给子组件B绑定自定义事件（事件的回调在父组件A中）

2.绑定自定义事件：

1.第一种方式：在父组件中

<Demo  @peiqi="test"/>或<Demo  v-on:peiqi="test"/>

子组件中触发自定义事件

this.$emit('peiqi',数据)

2.第二种方式：在父组件中

<Demo ref="demo"  />

mounted(){
    this.$refs.demo.$on('peiqi',this.test)
}

3.如果想要自定义事件只触发一次，可以使用once修饰符，或者$once方法

4.解绑自定义事件：this.$off(‘peiqi’)

5.组件上也可以绑定原生DOM事件，需要使用native修饰符

通过this.$refs.xxx.$on('peiqi',回调)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则会出现this指向问题

LOADING...