初学vue
组件自定义事件实现组件间通信
前面学习了props配置项可以轻松实现父子级组件间的通信,但同级组件的通信稍微麻烦点,同级组件通信的前提是父组件要传给子组件一在这里插入代码片
个方法,然后子组件调用这个方法来将自身的数据传给父组件,组组件接收到数据后,将数据继续传给需要该数据的组件,同样用props接收。
下面讲的通过$emit实现组件间通信就简单一点。
例如,我们要让父组件接收从子组件传来的数据并打印出来。
1、使用props实现方式如下:
App.vue
<template>
<div id="app">
<Son1 :getNameOfSon1="getNameOfSon1"></Son1>
</div>
</template>
<script>
import Son1 from "./components/Son1.vue"
export default {
name:"App",
components:{
Son1},
methods:{
getNameOfSon1(name,age){
console.log("App拿到了从Son1传递过来的值",name,age);
}
}
}
</script>
<style>
#app{
background-color: grey;
}
</style>
son1.vue
<template>
<div class="son1">
<h3>姓名:{
{name}}</h3>
<h3>年龄:{
{age}}</h3>
<button @click="sendMsgToApp">点我把son1中的数据传给app</button>
</div>
</template>
<script>
export default {
name:"Son1",
props:['getNameOfSon1'],
data(){
return {
name:"张三",
age:21
}
},
methods:{
sendMsgToApp(){
this.getNameOfSon1(this.name,this.age)
}
}
}
</script>
<style>
.son1{
background-color: lightgreen;
}
</style>
这种方式的主要思路是:父组件中定义一个方法,在组件标签中将这个方法传给子组件,子组件利用props接收后,受某个事件触发后可以通过this调用传过来的这个方法,实现子组件传递数据给父组件。
2、组件自定义事件实现组件间通信
2.1 第一种形式:在组件标签中使用@或者v-on绑定事件
- App.vue
<template>
<div id="app">
<Son2 @event1="getNameOfSon2"></Son2>
</div>
</template>
<script>
import Son2 from "./components/Son2.vue"
export default {
name:"App",
components:{
Son2},
methods:{
getNameOfSon2(name,age){
console.log("App拿到了从Son2传递过来的值",name,age);
}
}
}
</script>
<style>
#app{
background-color: grey;
}
</style>
- son2.vue
<template>
<div class="son2">
<h3>姓名:{
{name}}</h3>
<h3>年龄:{
{age}}</h3>
<button @click="sendMsgToApp">点我把son2中的数据传给app</button>
</div>
</template>
<script>
export default {
name:"son2",
data(){
return {
name:"李四",
age:"22"
}
},
methods:{
sendMsgToApp(){
this.$emit("event1",this.name,this.age)
}
}
}
</script>
<style>
.son2{
background-color: skyblue;
}
</style>
这种方式的主要思路是:子组件中的事件被触发后,通过this.$emit触发父组件中对应组件标签上绑定的自定义事件,该事件上绑定了调用的方法。其实相当于子组件间接触发了父组件标签元素上绑定的事件。
2.2 第二种形式:通过$refs+$on实现进行绑定
- App.vue
<template>
<div id="app">
<Son3 ref="son3"></Son3>
</div>
</template>
<script>
import Son3 from "./components/Son3.vue"
export default {
name:"App",
components:{
Son3},
methods:{
getNameOfSon3(name,age){
console.log("App拿到了从Son3传递过来的值",name,age);
}
},
mounted(){
// 通过this.$refs.son3拿到组件实例vc,通过$on绑定到vc上
this.$refs.son3.$on("event2",this.getNameOfSon3)
}
}
</script>
<style>
#app{
background-color: grey;
}
</style>
- son3.vue
<template>
<div class="son3">
<h3>姓名:{
{ name }}</h3>
<h3>年龄:{
{ age }}</h3>
<button @click="sendMsgToApp">点我把son3中的数据传给app</button>
</div>
</template>
<script>
export default {
name: "son3",
data() {
return {
name:"王五",
age:23
}
},
methods:{
sendMsgToApp(){
this.$emit("event2",this.name,this.age);
}
}
};
</script>
<style>
.son3 {
background-color: pink;
}
</style>
这种方式的主要思路和上面的那种方式差不多,不过这种方式并不是直接在组件标签上进行事件绑定,而是通过
this.\$refs.ref.xxx.\$on
给对象绑定事件,同时给事件绑定回调方法。
这两种形式的区别就是,方式一在模板加载完成后就固定好了,可以触发事件调用方法,而方式二更加灵活,例如在mounted()函数中可以添加定时器,让模板加载完成3s后绑定事件(模板加载完成的3s内点击都无效),如下。
mounted(){
setTimeout(()=>{
this.$refs.son3.$on("event2",this.getNameOfSon3)
},3000);
}
3、解绑组件自定义事件
$off解绑事件
this.$emit("事件名"); // 解绑一个事件
this.$emit(['事件名1','事件名2']); // 解绑多个事件
this.$emit(); // 解绑所有事件
总结
(1)组件的自定义事件是一种组件间通信的方式,适用于:子组件传递数据给父组件
(2)使用场景:A是父组件,B是子组件,B想给A传数据,那么就i要在A中给B绑定自定义事件(事件的回调在A中)
(3)绑定自定义事件:
1、第一种方式:在父组件中的组件标签中<Son @eventName="event"/>
或者<Son v-on:eventName="event"/>
2、第二种方式:在父组件中:<Demo ref="demo"/> .... mounted(){ this.$refs.demo.$on('eventName',参数) }
3、如果只想让自定义事件触发一次,可以使用once修饰符,或者$once方法
4、触发自定义事件:this.\$emit('eventName‘,数据)
5、解绑自定义事件:this.$off('eventName')
6、组件上绑定原生DOM事件,例如click时,需要在事件名后面使用native修饰符,否则会将该事件当成自定义事件
7、注意:通过this.$refs.xxx.$on('eventName',回调)
绑定事件时,回调用要么配置在methods中,要么用箭头函数,否则this指向会出问题。(直接将普通函数形式配置在methods中和在$on中回调使用箭头函数都是指向vc示例对象,而在$on中使用普通函数形式时,this指向触发事件的对象,可能是别的vc实例)