Vue学习笔记51--解绑组件自定义事件

解绑组件自定义事件

// 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')