解绑组件自定义事件
// this.$off('defineMyEvent')//解绑一个自定义事件 //解绑多个自定义事件 // this.$off(['defineMyEvent', 'demoEvent']) //等价于this.$off() //解绑所有自定义的事件 this.$off()
注意:
- 如果 vm 被销毁,则其所有子组件、事件均失效
-
注意:销毁后的组件的自定义事件也将失效
示例一:
App.vue
<template> <div class="app"> <!-- <img src="./assets/logo.png"> --> <h2>{{msg}}</h2> <hr> <!-- 第一种写法: 使用v-on: 或@ 通过父组件给子组件绑定一个自定义事件实现:子给父传递数据 --> <!-- <Student v-on:defineMyEvent="getStudentName"></Student> --> <!-- <Student @defineMyEvent.once="getStudentName"></Student> --> <Student @defineMyEvent="getStudentName" @demoEvent="demoMethod"></Student> <hr> <!-- 第二种写法 通过父组件给子组件绑定一个自定义事件实现--子给父传递数据,使用ref --> <Student ref="student" /> <hr> <!-- 通过父组件给子组件传递函数类型的props实现:子给父传递数据 --> <School :getShcoolName="getShcoolName"></School> </div> </template> <script> // 引入组件 import Student from './components/Student.vue'; import School from './components/School.vue'; export default { name: 'App', components: { Student, School }, data () { return { msg: 'Vue你好' } }, methods: { getShcoolName (name) { console.log('app收到了学校名称:', name) }, getStudentName (name) { console.log('App接收到了学生姓名:', name) }, demoMethod () { console.log('demoEvent被触发了') } }, // 挂载完毕 mounted () { // this.$refs.student.$on('defineMyEvent', this.getStudentName) //绑定自定义事件 this.$refs.student.$once('defineMyEvent', this.getStudentName) //绑定自定义事件 --一次性哦 // 延迟执行 // // setTimeout(() => { // // this.$refs.student.$on('defineMyEvent', this.getStudentName) // // }, 3000) } } </script> <style scoped> .app { background-color: rgb(178, 168, 168); } </style>
Student.vue
<!-- 组件的结构 --> <template> <div class="student"> <h3>学生姓名:{{name}}</h3> <h3>学生性别:{{ age }}</h3> <h3>当前求和为:{{mynum}}</h3> <button @click="mynum++">++ mynum++</button> <button @click="numberAdd">method mynum++</button> <button @click="sendStudentName">把学生姓名给app</button> <button @click="unbind">解绑自定义事件</button> <button @click="destoryVc">销毁当前Student组件的实例vc</button> </div> </template> <!-- 组件交互相关的代码(数据、方法等) --> <script> export default ({ // eslint-disable-next-line vue/multi-word-component-names name: 'Student', data () { return { msg: '我正在学习 Vue', name: '心仪', age: 6, mynum: 10 } }, methods: { numberAdd () { this.mynum++; console.log('numberAdd被执行了') }, sendStudentName () { // 触发Student组件实例身上的自定义事件 this.$emit('defineMyEvent', this.name) this.$emit('demoEvent') }, unbind () { // this.$off('defineMyEvent')//解绑一个自定义事件 //解绑多个自定义事件 // this.$off(['defineMyEvent', 'demoEvent']) //等价于this.$off() //解绑所有自定义的事件 this.$off() }, destoryVc () { // 销毁了当前Student组件的实例对象 // 注意:销毁后的组件的自定义事件也将失效 this.$destroy() }, } }) </script> <!-- 组件的默认样式 css写法 --> <!-- <style scoped> .demo { background-color: cadetblue; } </style> --> <style lang="less" scoped> .student { background-color: cadetblue; .myfontsize { font-size: 40px; } } </style>
main.js
// 引入Vue
import Vue from 'vue'
// 引入App
import App from './App.vue'
// 配置提示
Vue.config.productionTip = false
new Vue({
render: h => h(App),
/*
钩子
如果 vm 被销毁,则其所有子组件、事件均失效
mounted () {
setTimeout(() => {
this.$destroy
}, 5000)
}, */
}).$mount('#app')
博客内容主要用于日常学习记录,内容比较随意,如有问题,还需谅解!!!