自定义事件

一、绑定事件：

定义：子给父传递数据：通过父组件给子组件绑定一个自定义事件。

 @或v-on

App.vue代码：

<Student @sendName="getName"/> 

Student是子组件，sendName：事件名称，getName：回调函数

Student.vue代码

使用this.$emit调用，第一个参数为：事件名称，第二个参数：传递的数据

methods: {
 
pressBtn() {
 
// 调用自定义事件
 
this.$emit('sendName',this.name); 
 
}
 
},

子组件添加ref

给子组件添加ref=”student”，用$on的方式添加,第一个参数：名称，第二个参数：回调函数。
 

mounted() {
 
this.$refs.student.$on("sendName",this.getName);
 
}

注意：

1：如果子组件调用原生事件 需要添加native，否则会当成自定义组件，如：

@click.native="show"

2：$once，只执行一次。

二、事件解绑：

解绑一个事件

this.$off(‘xxxx’ )    xxxx：事件名称

解绑多个事件

 this.$off([‘x1’,’x2’])   使用数组的形式。

解绑所有事件

this.$off()

销毁组件实例

this.$destroy() //销毁了当前Student组件的实例，销毁后所有Student实例的自定义事件全都不奏效。

案例 

App.vue

 
<script>
   import Person from './components/Person.vue';
	
	export default {
		name:"App",
		data(){
			return {
			    title:"2209班",
			}
		},
		methods: {
			showName(name) {
				console.log("App得到了姓名",name);
			},
			showAge(age){
				console.log("App得到了年龄(this.refs.xxx.$on)",age);
			},
			show(){
				alert("123")
			}
		},
		components: {
			Person
		},
		mounted(){
			//第一个参数：自定义事件的名称，第二个参数：自定义事件的回调
			//$once 事件只执行一次
			this.$refs.person.$on("getAge",this.showAge);
		}
		
	}
 
script>
 
<style>
	
	
style>

components-Person

 
<script>
	export default{
		name:"Person",
		data(){
			return {
				name:"张三",
				age:19
			}
		},
		methods:{
			sendName(){
				// console.log("子组件",this.name);
				this.$emit("getName",this.name);
			},
			sendAge(){
				this.$emit("getAge",this.age);
			},
			offAge(){
				console.log("getAge 已解绑")
				this.$off("getAge");
			},
			// 销毁组件实例
			mydestory(){
				console.log("组件实例已销毁");
				this.$destroy();
			}
		}
	}
script>
 
<style>
style>

main.js

import Vue from 'vue'
import App from './App.vue'
 
Vue.config.productionTip = false
 
new Vue({
  render: h => h(App),
}).$mount('#app')