您好,登录后才能下订单哦!
这篇文章主要介绍“Vue组件中的自定义事件源码分析”,在日常操作中,相信很多人在Vue组件中的自定义事件源码分析问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Vue组件中的自定义事件源码分析”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
组件的自定义事件是一种组件间的通信方式,它适用于子组件向父组件传递数据或行为。
组件的自定义事件注意点:
1.组件的自定义事件实现的就是子组件向父组件通信的功能,所以,自定义事件的绑定动作需要在父组件中完成
2.组件的自定义事件的触发动作需要在子组件中完成,给谁绑定的事件,就找谁触发
在了解组件的自定义事件之前,我们也了解过props
,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实现的子组件向父组件传递数据
效果图如下:
页面初始化效果:
点击按钮后:
通过图上可以看出,当点击按钮之后,控制台输出了父组件收到的数据,子组件通过props
的方式向父组件传递了数据
首先第一步,就是要给组件绑定一个自定义事件,文章开始就说,绑定自定义事件是在父组件中完成的:
其次,在子组件中,需要对自定义事件进行触发,完成组件自定义事件通信:
效果图如下:
页面初始化效果:
点击按钮后:
通过图上可以看出,当点击按之后,控制台输出了父组件收到的数据。
通过以上两种通信方式,我们可以发现,子组件通过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组件中的自定义事件源码分析”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。