目录
一、自定义事件
1、作用
组件间的一种通信方式
2、场景
子组件给父组件传递数据
3、 理解
Father是父组件,Son是子组件,Son想给Father传递数据,那么要在Father中给Son绑定自定义事件(事件的回调在Father中)
4、原理
使用v-on绑定自定义事件,每个实例对象都实现了事件接口,即
使用
$on(eventName)
绑定事件(在父组件中绑定事件)
使用$emit(eventName)
触发事件(子组件中触发事件)
二、案例练习
需求:通过button按钮实现School组件向父组件App传递学校名称
效果图
1、第一步绑定事件(父组件App中)
① 方法一:使用@
在父组件中:
<School @schoolName="getName"/>
或<School v-on:schoolName="getName"/>
代码如下
<template>
<div>
<h3>学校的名称是:{{name}}</h3>
<!-- 自定义事件名为schoolName,getName为自定义事件的回调函数 -->
<School @schoolName="getName"/>
</div>
</template>
<script>
import School from "./components/School.vue"
export default {
name:"App",
data(){
return {
name:"",
}
},
components:{School},
methods:{
//自定义事件的回调函数
getName(name){
this.name=name
}
}
}
</script>
② 方法二:使用ref
在父组件中:
<School ref="demo"/>
…
mounted(){ this.$refs.demo.$on("schoolName件",getName) }
代码如下
<template>
<div>
<h3> 学校的名称是:{{name}}</h3>
<!-- 通过ref获取子组件实例对象 -->
<School ref="demo"/>
</div>
</template>
<script>
import School from "./components/School.vue"
export default {
name:"App",
data(){
return {
name:"",
}
},
components: { School },
methods:{
//自定义事件的回调函数
getName(name){
this.name=name
}
},
mounted(){
//当自定义事件schoolName被调用的时候,执行getName函数
this.$refs.schoolName.$on("schoolName",this.getName)
}
}
</script>
若想要事件只触发一次,可以使用once
修饰符,或者$once
方法
this.$refs.schoolName.$once("schoolName",this.getName)
2、第二步触发事件(子组件School中)
给哪个子组件绑定的事件,找哪个子组件触发自定义事件
触发事件:
this.$emit("自定义事件",数据)
<template>
<div>
<p>学校名称:{{name}}</p>
<p>学校地址:{{adress}}</p>
<button @click="sendName">通过自定义事件实现子传递数据</button>
</div>
</template>
<script>
export default {
name:"School",
data(){
return {
name:"喵喵学院",
adress:"郑州"
}
},
methods:{
//给谁绑定的自定义事件,找谁触发事件
sendName(){
this.$emit("schoolName",this.name)
}
}
}
</script>
三、总结
1、绑定事件
① 方法一:在父组件中
<School @自定义事件="回调函数"/>
或<School v-on:自定义事件="回调函数"/>
② 方法二:在父组件中
<School ref="XXX"/>
…
mounted(){ this.$refs.XXX.$on("自定义事件",回调函数) }
2、触发事件
this.$emit("自定义事件",数据)
3、解绑事件
给谁绑定的自定义事件,找谁解绑
单个解绑:this.$off("自定义事件")
解绑多个自定义事件:this.$off(["xxx1","xxx2"])
全部解绑:this.$off()
(解绑不影响原生DOM事件)
补充:还可以通过$destroy
实现自定义事件解绑:this.$destroy()
(销毁组件)
<template>
<div>
<p>学校名称:{{name}}</p>
<p>学校地址:{{adress}}</p>
<button @click="sendName">通过自定义事件实现子给父传递数据</button>
<button @click="add">点击number的值为——{{number}}</button>
<button @click="offName">$off解绑自定义事件</button>
<button @click="destroyName">$destroy实现解绑自定义事件</button>
</div>
</template>
<script>
export default {
name:"School",
data(){
return {
name:"喵喵学院",
adress:"郑州",
number:0
}
},
methods:{
//通过自定义事件实现子给父传递数据
sendName(){
this.$emit("schoolName",this.name)
},
//原生DOM点击事件
add(){
this.number++;
console.log('原生DOM事件被调用');
},
//通过$off实现解绑自定义事件
offName(){
this.$off()
},
//通过$destroy实现解绑自定义事件
destroyName(){
this.$destroy();
},
},
}
</script>
4、组件绑定原生DOM事件
组件(组件标签)上也可以绑定原生DOM事件,需要使用native
修饰符
<School @click.native="showName">
5、注意事项
通过this.$refs.xxx.$on('自定义事件',回调)
绑定自定义事件时,回调要么配置在methods中,要么使用箭头函数,否则this的指向会出问题!