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;
   });
}
最后,自定义事件会在组件摧毁时一并被销毁

你可能感兴趣的:(VueCLI,vue.js,javascript,前端)