Vue组件自定义事件传递(绑定、解绑)

父组件:

<div>
      <!-- <val v-on:chang="demo"></val> -->
      <!-- 简写 -->
      <!-- <val @chang="demo"></val> -->
      <!-- 通过ref传事件 灵活性更高 -->
      <val ref="valref"></val>

      <!-- 也可以给组件绑定原生的事件 加上.native  给组件最外层的根元素绑定-->
      <!-- <val @click.native="demo"></val> -->
</div>

//可以通过以上方法传递事件给子组件

//先定义一个demo事件

methods:{
        demo(name){
            console.log('我被调用的了,我的参数是:',name);
        }
        //参数多的话  可以用下面方法把后面的参数集合成一个数组
        // demo(name,...params){
        //     console.log('我被调用的了,我的参数是:',name,params);
        // }
    },

//ref绑定
mounted(){
        //可以定义为异步  如果直接绑定就定义不了 所以ref更加的灵活
        setTimeout( () => {
            this.$refs.valref.$on('chang',this.demo)
            //触发一次不触发了
            // this.$refs.valref.$once('chang',this.demo)
        },3000)
    }

子组件:

<div>
      <button @click="sendchang">触发父组件事件</button>
      <button @click="unsendchang">解绑父组件事件</button>
  </div>

 data(){
        return{
            name:'我是参数name'
        }
    },
    methods:{
        //通过触发sendchang  来触发父组件定义的chang事件 可以传多个参数
        sendchang(){
            this.$emit('chang', this.name);
        },

        //解绑
        unsendchang(){
            // this.$off('chang') // 解绑单个
            // this.$off(['chang','chang2']) //解绑多个
            this.$off() //解绑所有
        }
    },