Vue 组件的自定义事件

Vue 组件的自定义事件

一种组件间通信的方式，适用于：子组件===>父组件

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

绑定自定义事件：

第一种方式
在父组件中，为子组件绑定自定义事件

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

methods:{
    
    
test(d){
    
    
	console.log(d);
	}
}

第二种方式
在父组件中

<Demo ref="demo">

methods:{
    
    
test(d){
    
    
	console.log(d);
	}
}

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

---

若想让自定义事件只能触发一次，可以使用once修饰符，或$once方法

---

在子组件中
触发自定义事件：this.$emit('getData',123)
解绑自定义事件：this.$off('getData')

---

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

注意：通过this.$refs.xxx.$on(‘自定义事件名’,回调方法) 绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题，this指向使用自定义事件的组件