组件如何实现解绑

文章标签： 前端 vue
版权
<template>
  <div>
    <h1>{{ name }}</h1>
    <button @click="send">点击</button>
    <!-- <button @click="offs">解绑</button> -->
  </div>
</template>

<script>
export default {
    name:"MyStutend",
    data() {
      return {
        name:'李四'
      }
    },
    methods:{
      // 测试$emit
      // send(){
      //   // 触发 就要使用$emit
      //   this.$emit('wq',this.name)
      // }
      // ref 配合 $emit
      send(){
      //   // 触发 就要使用$emit
        // this.$emit('hjj',this.name)
        this.$bus.$emit('hjj',this.name)
        this.$bus.$emit('ljp',this.name)
      },
      offs(){
        // 解绑单个
        // this.$bus.$off('hjj')
        // 解绑多个
        // this.$bus.$off(['hjj','ljp']
        // 解绑全部
        // this.$bus.$off()
      }
    }
    // 对象 数组
    // props:['name']// 张三 
    // props:{
    //   name:{
    //     type:Number,
    //     default:1
    //   }
    // }
    
    // ..............
    // $emit 配合ref 自定义事件 全局事件总线 
    // vc vm
    // vc.原型对象.对象原型 === vm.原型对象
    // mounted(){
    //   console.log(this);
    // }