绑定自定义事件vue.js

native修饰符,添加后可以触发原生的事件，没有添加native默认为自定义事件

<MyDay04 @wq="sum" @click.native="myFun" ref="demo"/>

组件规则
// 1.向外暴露的名称需要使用驼峰命名(推荐使用)，使用-连接
// 2.导入组件时，取的名称最好暴露的名称一致，名称可以任意定义(不推荐)
// 3.但凡注册了组件，必须使用组件

export default {
  name: 'App',
  components: {
    // HelloWorld,
    // "aaa":HelloW,
    // stutend,
    // MyDay01,
    // MyDay02,
    // MyDay03,
    MyDay04,
  },
  data() {
    return {
      // msg:"我是测试的元素111111111",
      // msgs:"我是测试的元素22222222"
      // ages:20,
      dataName:"",
    }
  },

    // 第一种方式绑定自定义事件
sum(a){
      // console.log(this);
      console.log(11111111111);
      console.log(a);
    },

第二种方式绑定自定义事件

 func2(a){
      console.log(22222222222222);
      console.log(a);
    },
    myFun(a){
      console.log(this);
      console.log(4444444444);
      console.log(a);
    }
    // func1(){
    //   console.log(this.$refs);

 1.给元素设置ref，获取的是Dom

console.log(this.$refs.newRef.style.color);
    //   // console.log(this.$refs.newRef.className);
    //   // console.log(this.$refs.newRef.title);

给组件设置ref，获取的是vc

console.log(this.$refs.stuRef.userName);
    // }
  },

挂载后

 第二种方式绑定自定义事件,写入在methods

this.$refs.demo.$on("zpj",this.func2);

写函数形式，需要使用箭头函数，this指向自身

this.$refs.demo.$on("ch",(a)=>{
      console.log(this);
      console.log(33333333333);
      console.log(a);
    });

绑定自定义事件后只触发一次

this.$refs.demo.$once("zml",(a)=>{
      console.log(6666666666);
      console.log(a);
      this.dataName = a;
    })
    // console.log(11111111111);
    // console.log(stutend);
    // this.$refs.demo.$on("zpj",this.num);
    // console.log(this.$refs.demo.$on("zpj",num));
  },
}

解除绑定自定义事件
        removeBtn(){
            // 解除绑定一种写法单个
            // this.$off("zml");
            // 解除绑定二种写法多个
            // this.$off(["zml","wq"]);
            // 解除绑定三种写法所有
            this.$off();
        }
    }
}