Vue.js组件通信之自定义事件详解

组件通信

从父组件向子组件通信，通过小道具传递数据就可以了，但某视频剪辑软件组件通信的场景不止有这一种，归纳起来，组件之间的通信可以用下图来表示：

自定义事件

当子组件需要向父组件传递数据时，就要用到自定义事件。子组件用**$ emit()来触发事件**,父组件用**$ on()**来监听子组件的事件。

父组件也可以直接在子组件的自定义标签上使用绑定事件来监听子组件触发的事件。

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' meta name=' viewport ' content=' width=device-width，initial-scale=1.0 ' meta http-equiv=' X-UA-Compatible ' content=' ie=edge '脚本src=' http :https://unpkg。com/vue/dist/vue。js /脚本标题自定义事件/title/headbody div id='app' p总数： { { total } }/p my-component @递增=' handleGetTotal ' @ reduce=' handleGetTotal '/my-component/div script vue。组件(' my-component '，{ template : ' \ div \ button @ click=' handleReduce ' 1/button @ click=' handleReduce '-1/button \/div '，数据： function(){ return { count 3: } }，方法： {handle增量：功能这个$emit('增加，这个。计数器)；}，handleReduce:函数(){这个。反；这个$emit('reduce '，这个。计数器)；} } });var app=new Vue({ el: '#app '，data: { total: 0 }，methods : { handlegettotal : }函数（总计){ this . total=total } } })；/脚本/正文/html

子组件有两个按钮，分别实现一和-1的效果，在改变组件的数据"计数器"后，通过$emit()在把它传递给父组件，父组件使用v-:增加和：减少监听事件。

$emit()方法的第一个参数是自定义事件的名称，后面的参数是要传递的数据，可以不填或者填写多个。

注意：除了用绑定事件在组件上监听自定义事件外，也可以监听数字正射影像图事件，这时候可以用。当地的修饰符表示监听的是一个原生事件，监听的是该组件的根元素：

my-component v-:点击。native=' handleClick '/my-component使用v型

Vue 2.x可以在自定义组件上使用v型指令。

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' meta name=' viewport ' content=' width=device-width，initial-scale=1.0 ' meta http-equiv=' X-UA-Compatible ' content=' ie=edge '脚本src=' http :https://unpkg。com/vue/dist/vue。js /脚本标题使用v型/标题/头体div id=' app ' p总数：{ { total } }/p my-component v-model=' total '/my-component/div script vue。组件(' my-component '，{ template : ' button @ click=' handleClick ' 1/button '，data : function(){ return { counter : } }，methods : { handleClick : function(){ this。计数器；这个$emit('input '，这个。计数器)；} } });var app=new Vue({ el: '#app '，数据： { total : { 0 } })；/脚本/正文/html仍然是点击按钮一的效果，不过这次组件$emit()的事件是特殊的输入，在使用组件的父级，并没有在我的组件上使用@ input=“handler”，而是使用了v型板顶的一个数据总计。这也可以称作是一个语法糖，因为上面的示例可以间接地用自定义事件来实现：

div id='myApp' p总数：{ { total } }/p my-component 1 @ input=' handlegetTotal '/my-component 1/div script vue。组件(' my-component 1 '，{ template : ' button @ click=' handleClick ' 1/button '，data : function(){ return { counter : { 0 } }，methods : { handleClick : function(){ this。计数器；这个$emit('input '，这个。计数器)；} } });var myApp=new Vue({ El : ' # myApp '，data: { total: 0 }，methods : { handlegettotal :函数（值){ this . total=value } } })；/script v-型号还可以用来创建自定义的表单输入组件，进行数据双向绑定：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' meta name=' viewport ' content=' width=device-width，initial-scale=1.0 ' meta http-equiv=' X-UA-Compatible ' content=' ie=edge '脚本src=' http :https://unpkg。com/vue/dist/vue。js /脚本标题自定义表单输入组件/title/headbody div id='app' p总数：{ { total } }/p my-component v-model=' total '/my-component button @ click=' handleReduce '-1/button/div script vue。组件(' my-component '，{ props: ['value']，template : ' input : value=' value ' @ input=' updateValue ')，方法： { updateValue : function(event){ this .$emit('input '，事件。目标。值)；} } });var app=new Vue({ el: '#app '，data: { total: 0 }，methods : { handlereduce : function(){ this。总计-；} } });/脚本/正文/html

注意：实现这样一个具有双向绑定的v型组件要满足下面的两个要求：

接受一个价值属性在有新的价值时触发投入事件更多教程点击《Vue.js前端组件学习教程》 ,欢迎大家学习阅读。

关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。