21-绑定自定义事件

绑定自定义事件

利用自定义事件获取子组件的值

父组件给子组件绑定一个自定义事件，实际上是绑定到了子组件的实例对象vc上：

<!-- 自定义myEvent事件 -->
<Student v-on:myEvent='getStudentName'/>

在父组件中编写getStudentName的实现：

getStudentName(name) {console.log(`学生名称是：${name}`)
}

在子组件Student中利用$emit触发组件实例对象上的事件

<template><div class="student"><h2>学生姓名:{{name}}</h2><h2>学生年龄：{{age}}</h2><button @click="sendStudentName">把学生名给app</button></div>
</template><script>
export default {name: 'Student',data() {return {name:'张三',age:18}},methods: {sendStudentName() {// 触发Student组件实例身上的myEvent事件this.$emit('myEvent', this.name)  // 因为事件时绑定在Student的实例对象上的，所以可以直接通过this进行触发}},
}
</script>

自定义事件可以像普通事件一样使用简写形式:

<Student @myEvent='getStudentName'/>

父组件中给子组件实例对象绑定自定义事件的另一种写法：

<template><div id="app" class="app"><!-- 绑定自定义事件第二种写法，在子组件上添加ref，使得父组件可以获取到Student子组件的实例对象 --><Student ref='student'/></div>
</template><script>
import Student from './components/Student'
import School from './components/School'export default {name: 'App',components: {Student, School},methods: {getStudentName(name) {console.log(`学生名称是：${name}`)}},mounted() {// 使用this.$refs.student获取到Student组件实例对象// 使用 $on 为组件实例对象绑定自定义事件myEvent// 使用该方式会更加灵活，比如在模板加载3秒后再绑定事件，就可以在这里加定时器this.$refs.student.$on('myEvent', this.getStudentName)},
}
</script>

如果想让绑定的事件只触发一次，两种写法：

第一种写法：

<Student @myEvent.once='getStudentName'/>

第二种写法：

this.$refs.student.$once('myEvent', this.getStudentName)

绑定的事件函数可以传递多个值：

getStudentName(name,a,b,c) {console.log(`学生名称是：${name}`)
}

触发事件时也传入多个值即可：

this.$emit('myEvent', this.name, 1, 2, 3)

解绑自定义事件

在子组件使用使用$off解绑自定义事件：

this.$off('myEvent')  // 解绑一个自定义事件

解绑多个自定义事件：需要传如一个数组

this.$off(['myEvent', 'myEvent2']) // 解绑多个

解绑所有自定义事件：

this.$off()  // 解绑所有自定义事件

当组件实例被销毁时，实例上的所有自定义事件全都失效。

this.$destroy();

自定义事件回调函数的this

第一种情况：

在methods中定义回调函数，在绑定事件时填写回调函数名称。因为methods中的回调函数的this指向的是当前组件，所以此处指向的是当前组件。

export default {name: 'App',components: { Student},data() {return {name: ''}},  methods: {getStudentName(name) {console.log(`学生名称是：${name}`)this.name = name;   // 这里的this指向的是当前组件}},mounted() {this.$refs.student.$on('myEvent', this.getStudentName)  // 在methods中定义回调函数，此处只写回调函数名称},
}

第二种情况：

直接在绑定自定义事件时定义回调函数，此时回调函数体内的this指向的是触发该自定义事件的子组件。

export default {name: 'App',components: { Student},data() {return {name: ''}},  mounted() {// 直接在绑定自定义事件时定义回调函数，且回调函数不是箭头函数this.$refs.student.$on('myEvent', function (name){console.log(`学生名称是：${name}`)this.name = name;   // 这里的this指向的是触发该事件的子组件})  },
}

第三种情况：

直接在绑定自定义事件时定义回调函数，回调函数使用箭头函数写法。

原本此处的函数体内的this应该指向触发该自定义事件的子组件，但是因为箭头函数没有this，所以向外找到了mounted的this，即指向了当前组件

export default {name: 'App',components: { Student},data() {return {name: ''}},  mounted() {// 直接在绑定自定义事件时定义回调函数，回调函数使用箭头函数写法this.$refs.student.$on('myEvent', name => {console.log(`学生名称是：${name}`)this.name = name;   // 这里的this指向的当前组件})  },
}

组件上使用原生事件

在组件上直接使用原生事件时，默认也会被当做自定义事件：

<!-- vue会将组件上的click也当做自定义事件 -->
<Student @click='getStudentName'/>

此时，vue会将Student组件上的click事件也当做自定义事件，需要在Student组件中使用$emit触发才能使用。

如果要在组件上声明这个事件时一个原生事件，需要使用修饰符：

<!-- 使用native修饰符声明这是一个原生事件 -->
<Student @click.native='getStudentName'/>

先赞后看，养成习惯！！！^ _ ^ ❤️ ❤️ ❤️
码字不易，大家的支持就是我的坚持下去的动力。点赞后不要忘了关注我哦！