- 一种组件间的通信方式,适用于:子组件 ===> 父组件
- 使用场景:A是父组件,B是子组件,B想给A传数据,那么就要在A中给B绑定自定义事件(事件的定义与回调在A中)。
- 绑定自定义事件:
- 在父组件中:<Student @xin="incident"/>或者<Student v-on:xin="incident"/>
- 在父组件的某个方法中:this.$refs.Student.$on("Student",this.incident);
- 若想让自定义事件只能触发一次,可以使用once修饰符或$once方法。
- 触发自定义事件,在子组件的某个方法中调用:this.$emit("xin",参数)
- 解绑自定义事件,在子组件的某个方法中调用:
this.$off("xin"); 删除指定事件
this.$off(["xin","xxx","xxx"]); 删除多个事件
this.$off(); 删除所有事件
组件上也可以绑定原生DOM事件,需要使用native修饰符
例如:<Student @click.native="incident"/>
注意:通过this$refs.xxx.$on('incident',回调函数)绑定自定义事件时,回调要么配置在methods中,要么用箭头函数,否则this执行会指向调用的函数。
参考
App.vue
<template>
<div>
<h1>学校名称:{{ name }}</h1>
<Student ref="Student" @xin="incident"/>
</div>
</template>
<script>
import Student from "./components/Student.vue";
export default {
name: "App",
components: {
Student,
},
data() {
return {
name: "希望",
};
},
methods: {
addEvent(){
//通过ref的形式给Student传递参数
//this.$refs.Student.$on("Student",this.incident);
},
incident(...params) {
console.log("111111111111111", params);
this.name = params[0];
},
},
};
</script>
Student.vue
<template>
<div>
<h1>姓名:{{name}}</h1>
<h1>年纪:{{age}}</h1>
<button @click="age++">点击我曾加数量</button>
<button @click="clickEvent">点击触发事件</button>
<button @click="cancel">点击取消事件</button>
</div>
</template>
<script>
export default {
name:"Student",
data(){
return {
name:"李义新",
age:10
}
},
methods:{
clickEvent(){
console.log("clickEvent触发了");
this.$emit("xin","希望小学"); //触发事件,第二个参数及后面的参数是事件调用方法的参数
},
cancel(){
this.$off("xin"); //删除指定事件
this.$off(["xin","xxx","xxx"]); //删除多个事件
this.$off(); //删除所有事件
}
}
}
</script>