免费资源部落

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

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

原理图

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

1.组件的自定义事件实现的就是子组件向父组件通信的功能，所以，自定义事件的绑定动作需要在父组件中完成

2.组件的自定义事件的触发动作需要在子组件中完成，给谁绑定的事件，就找谁触发

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

通过props实现组件间通信

App.vue中：

<!--通过父组件给子组件传递函数类型的props实现：子给父传递数据--><TestA:getName="getName"/>......<script>importTestAfrom'./components/TestA'exportdefault{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>exportdefault{name:'TestA',//接收父组件传递过来的propsprops:["getName"],data(){return{name:'路飞',age:18}},methods:{sendName(){//点击按钮后，触发此方法，传递name给父组件this.getName(this.name)}}}</script>

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

效果图如下：

页面初始化效果：

点击按钮后：

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

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

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

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

效果图如下：

页面初始化效果：

点击按钮后：

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

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

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

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

App.vue:

<template><divclass="app"><h2>{{msg}}</h2><!--通过父组件给子组件传递函数类型的props实现：子给父传递数据--><TestA:getName="getName"/><!--通过父组件给子组件绑定一个自定义事件实现：子给父传递数据--><!--方法二--><TestBref="testb"/></div></template><script>importTestAfrom'./components/TestA'importTestBfrom'./components/TestB'exportdefault{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><stylescoped>.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>exportdefault{name:'TestB',data(){return{native:'东海',adress:'东海风车村'}},methods:{sendNative(){this.$emit('demo',this.native)},//解绑demo自定义事件noBand(){this.$off('demo');}}}</script><stylescoped>div{background-color:aquamarine;padding:15px;margin-top:5px;}</style>

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

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

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

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