Vue中的组件自定义事件
Vue中的组件自定义事件
什么是Vue中的自定义事件：
我们经常会用一些v-on事件，比如说，常用一些简写的@click事件，有没有想过，写一些类似于click的事件，这里的自定义事件，就是指一些类似于click的事件，但是，这个自定义事件，主要是添加在子组件上的，用来从子组件向父组件传递数据，像这样（）：
<School @xmg="getSchoolName">School>
自定义一个"xmg"事件，getSchoolName这个方法是在methods中去写的，不像click事件，这些自定义事件需要在子组件中定义触发的事件。
OK，简介就到这，接下来进入正题，很多疑问会在本文主体中解决。
Vue自定义事件的具体实现：
1.在Vue父组件（这里用App组件代替）中自定义事件，并将自定义事件绑定给子组件（给VC组件绑定事件），此部分为两种方法：
1.1 直接使用v-on或者@创建自定义事件：
<School @xmg="getSchoolName"> 就像上面简介那样，直接自定义一个事件xmg，绑定给School组件，触发的方法为getSchoolName
1.2 在生命周期钩子，通过ref属性来为子组件绑定事件
首先为子组件标签添加ref属性School
<School ref="School">School>
接着为在生命周期钩子中，添加自定义事件，这里主要是通过Vue自带的$on去为子组件添加自定义事件
//基本格式this.$refs.School.$on('自定事件名称',触发自定义事件时调用的方法)
mounted(){
this.$refs.School.$on('xmg',getSchoolName);
}
使用那种方法更好 ?
这里推荐使用第二种方法，因为第二种方法更具有操作性，可以设置时间函数回调，或者其他条件等等，像这样：
mounted(){
setTimeOut(()=>{
this.$refs.School.$on('xmg',getSchoolName);
},500);
}
2.在子组件中使用自定义事件
这里子组件主要使用组件自带的$emit方法来调用自定义事件，基本格式如下：
this.$emit('自定义事件名称',要传递的参数：param1,param2...);
但是，想要触发以上的$emit方法，还需要事件，来触发此条代码的执行，像这样：
首先，在标签里添加一个点击事件
<button @click="setSchoolName">button>
接着，将写一个方法与点击事件绑定，用来触发this.$emit()的执行
methods:{
setSchoolName(){
this.$emit('xmg',this.name);
}
}
这样，就可以将子组件的数据传递到父组件中去
可以在父组件中为子组件添加多个自定义事件
子组件解绑自定义事件
解绑事件主要在子组件中，用的组件自带的$off方法
1.解绑一个自定义事件
this.$off("xmg");
2.解绑多个自定义事件
this.$off(["xmg1","xmg2"]);
3.解绑全部自定义事件
this.$off();
注意事项：
1.1.1 如果我写一个@click表示什么：
<School @click="getSchoolName">School>
这表示为子组件添加一个名为click的自定义事件，和xmg自定义事件一样
如果我想要为子组件添加一个点击事件，怎么写？加一个native后缀
<School @click.native="getSchoolName">School>
这样就会为子组件最外层的标签添加一个点击事件
1.2.1 关于可不可以直接将方法写在$on中，像这样：
mounted(){
this.$refs.School.$on('xmg',function(name,...params){
console.log("App收到了学校名：",name,params);
this.SchoolName=name;
});
}
首先，可以将方法直接写在$on中，但是不可以这样写，要写成箭头函数，为什么呢？
因为this指代问题，function函数中的this指代的是子组件，而箭头函数的this指代的是父组件，这样就导致，当我们想要从子组件向父组件传递信息时，无法传递，所以要写为箭头函数
1.2.2 可以使用$once方法进行绑定，这样在子组件只能调用一次自定义事件：
mounted(){
this.$refs.School.$once('xmg',(name,...params)=>{
console.log("App收到了学校名：",name,params);
this.SchoolName=name;
});
}