Vue组件中的自定义事件源码分析

发布时间:2023-03-15 15:01:26 作者:iii
来源:亿速云 阅读:107

这篇文章主要介绍“Vue组件中的自定义事件源码分析”,在日常操作中,相信很多人在Vue组件中的自定义事件源码分析问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Vue组件中的自定义事件源码分析”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

组件的自定义事件是一种组件间的通信方式,它适用于子组件向父组件传递数据或行为

原理图

Vue组件中的自定义事件源码分析

组件的自定义事件注意点:

在了解组件的自定义事件之前,我们也了解过propsprops也能实现子组件向父组件通信,接下来,我将从props的方式过渡到组件的自定义事件,以便大家能够更好的理解组件的自定义事件,也可以对比这两种方式存在的差异和相似之处

通过props实现组件间通信

App.vue中:

<!-- 通过父组件给子组件传递函数类型的props实现:子给父传递数据 -->
<TestA :getName="getName"/>
...
...
<script>
import TestA from './components/TestA'
	export default {
		name:'App',
		components:{TestA},
		data(){
			return{
				msg:'你好呀'
			}
		},
		methods:{
			getName(name){
				console.log('App组件收到了数据', name)
			},
		},
	}
</script>

代码片段中getName()方法中的name参数用于接收子组件传递过来的参数

TestA.vue:

<!--通过点击事件传递数据-->
<button @click="sendName">将姓名发送给App组件</button>
...
...
<script>
export default {
    name:'TestA',
    //接收父组件传递过来的props
    props:["getName"],
    data(){
        return{
            name:'路飞',
            age:18
        }
    },
    methods:{
        sendName(){
            //点击按钮后,触发此方法,传递name给父组件
            this.getName(this.name)
        }
    }
}
</script>

以上是用props实现的子组件向父组件传递数据

效果图如下:

页面初始化效果:

Vue组件中的自定义事件源码分析

点击按钮后:

Vue组件中的自定义事件源码分析

通过图上可以看出,当点击按钮之后,控制台输出了父组件收到的数据,子组件通过props的方式向父组件传递了数据

通过组件的自定义事件实现组件间通信

首先第一步,就是要给组件绑定一个自定义事件,文章开始就说,绑定自定义事件是在父组件中完成的:

Vue组件中的自定义事件源码分析

其次,在子组件中,需要对自定义事件进行触发,完成组件自定义事件通信:

Vue组件中的自定义事件源码分析

效果图如下:

页面初始化效果:

Vue组件中的自定义事件源码分析

点击按钮后:

Vue组件中的自定义事件源码分析

通过图上可以看出,当点击按之后,控制台输出了父组件收到的数据。

通过以上两种通信方式,我们可以发现,子组件通过props方式向父组件传递数据,前提是父组件要给子组件传递一个回调函数,子组件接收之后,才能向父组件传递数据,而组件的自定义事件只需调用 $emit 方法对指定自定义事件进行触发,即可向父组件传递数据。

组件自定义事件其他知识点

自定义组件绑定的第二种方式

App.vue:

<template>
	<div class="app">
		<h2>{{msg}}</h2>
		<!-- 通过父组件给子组件传递函数类型的props实现:子给父传递数据 -->
		<TestA :getName="getName"/>
		<!-- 通过父组件给子组件绑定一个自定义事件实现:子给父传递数据 -->
    <!--方法二-->
		<TestB ref="testb"/>
	</div>
</template>

<script>
import TestA from './components/TestA'
import TestB from './components/TestB'
	export default {
		name:'App',
		components:{TestA, TestB},
		data(){
			return{
				msg:'你好呀'
			}
		},
		methods:{
			getName(name){
				console.log('我收到了数据', name)
			},
			send(name){
				console.log("send被调用了", name)
			}
		},
		mounted(){
			this.$refs.testb.$on('demo', this.send);
		}
	}
</script>

<style scoped>
.app{
	background-color: rgb(162, 255, 139);
	padding: 15px;
}
</style>

通过ref属性拿到TestB组件组件的实例对象(vc),在组件挂载完成之后(mounted)使用this.$refs.组件名.$on('自定义事件名', 回调函数)完成对子组件自定义事件的绑定,同样也能实现效果。

而且,使用这种方式比较灵活,能完成一些操作,比如一次性自定义事件,延迟,判断等等。

一次性自定义事件

v-on:事件名.once="XXXX
或者
this.$refs.student.$once("事件名", 事件内容)

自定义事件的解绑

当我们使用完自定义事件后,可以解绑自定义事件,这样做的好处是,尽量降低对程序性能的占用,提高程序运行的效率

自定义的解绑动作也是在子组件中进行,简单来说也就是,给谁绑定的就找谁解绑

TestB中

<template>
  <div>
      <h3>籍贯:{{native}}</h3>
      <h3>详细地址:{{adress}}</h3>
      <button @click="sendNative">点击触发自定义事件</button>
      <button @click="noBand">解绑自定义事件</button>
  </div>
</template>

<script>
export default {
    name:'TestB',
    data(){
        return{
            native:'东海',
            adress:'东海风车村'
        }
    },
    methods:{
        sendNative(){
            this.$emit('demo',this.native)
        },
        //解绑demo自定义事件
        noBand(){
            this.$off('demo');
        }
    }
    
}
</script>

<style scoped>
div{
    background-color: aquamarine;
    padding: 15px;
    margin-top: 5px;
}
</style>

还有一个点就是,假若有很多自定义事件需要解绑,那可以这么写:

{方法体内
    this.$off();
}

直接不用传递任何参数,这样写的话,只要是给此组件绑定的任何自定义事件都会解绑

到此,关于“Vue组件中的自定义事件源码分析”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!

推荐阅读:
  1. vue实现分页组件的源代码是什么?
  2. Vue实现简单分页器

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

vue

上一篇:PostgreSQL时间处理的常用方式有哪些

下一篇:如何使用CSS实现毛玻璃特效

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》