Vue中自定义事件

Vue中自定义事件

1.作用

​ 实现组件间子组件向父组件之间的通信

2.自定义事件的使用

2.1定义自定义事件方式一

代码示例：子组件A

<template>
	<div>
        <button @click="transfer">子组件传递数据</button>
    </div>    
</template>


<script>
	export default {
		name:'A',
		data() {	
		},
		methods: {
			transfer(){
				//触发A组件实例上的relay事件
                //$emit表示触发父组件上对应的方法
				this.$emit('relay',参数)
			}
		},
	}
</script>

​ 父组件App:

<template>
	<div>
        <!--给子组件绑定自定义事件-->
        <button @click="relay">父组件接收数据</button>
    </div>    
</template>

<script>
	export default {
		name:'App',
		data() {	
		},
		methods: {
			relay(...params){
				console.log('App收到了数据：',params)
			},
		}
	}
</script>

2.2父组件接收数据方式二-$refs

<template>
	<div>
        <!--A表示子组件,ref属性对该组件进行标识，在生命周期函数中进行绑定-->
        <A ref="A"></A>
    </div>    
</template>

<script>
	export default {
		name:'App',
		data() {	
		},
		methods: {
			relay(...params){
				console.log('App收到了数据：',params)
			}
		},
        mounted(){
            //通过$on绑定事件transfer
            this.$refs.A.$on('transfer', this.relay)
        }
	}
</script>

2.3 解绑自定义事件

//子组件中，通过在生命周期函数中使用$off解绑事件
//vm.$off( [event, callback]) 移除自定义事件监听器
//this.$off()表示全部解绑
//this.$off('事件')表示移除该事件所有监听器
//如果同时提供了事件与回调，则只移除这个回调的监听器。
this.$off('事件名')