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"></School

​ 就像上面简介那样，直接自定义一个事件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;
   });
}

最后，自定义事件会在组件摧毁时一并被销毁