vue.js入门(3)——详解组件通信

本文介绍vue.js组件，具体如下：

5.2 组件通信

尽管子组件可以用这个。$家长访问它的父组件及其父链上任意的实例，不过子组件应当避免直接依赖父组件的数据，尽量显式地使用小道具传递数据。另外，在子组件中修改父组件的状态是非常糟糕的做法，因为：

1.这让父组件与子组件紧密地耦合；

2.只看父组件，很难理解父组件的状态。因为它可能被任意子组件修改！理想情况下，只有组件自己能修改它的状态。

每个某视频剪辑软件实例都是一个事件触发器：

$on()——监听事件$emit()——。把事件沿着作用域链向上派送。(触发事件)$dispatch()——派发事件，事件沿着父链冒泡$broadcast()——广播事件，事件向下传导给所有的后代。5.2.1 监听与触发

v-on监听自定义事件：

！DOCTYPE html html头元字符集=' UTF-8 '标题/标题/头体！-子组件模板-模板id='子模板'输入v-model='msg' /按钮：click=' notify '调度事件/按钮/模板！-父组件模板-div id=' events-example ' pmessages : { { messages | JSON } }/p child v-: child-msg=' handleIt '/child/div/body script src=' http : js/vue。js/注册子组件//将当前消息派发出去Vue.component('child '，{ template: '#child-template '，data : function(){ return { msg : ' hello ' } })，methods : { notify : function(){ if(this。味精。trim()){ this } .$dispatch('child-msg '，这个。味精)；this.msg=} } } })//初始化父组件//在收到消息时将事件推入一个数组中var parent=new Vue({ El : ' # events-example '，data: { messages: [] }，methods : { ' handleIt ' : function(){ alert(' a ')；} } })/脚本/html

父组件可以在使用子组件的地方直接用v-on来监听子组件触发的事件：

！DOCTYPE html html head meta charset=' UTF-8 ' title/title/head body div id=' counter-event-example ' p { { total } }/p button-counter v-: incrementTotal '/button-counter v-: incrementTotal=' incrementTotal '/button-counter/div/body script src=' http : js/vue。js ' type=' text/JAVAScript ' charset=' utf-8 '/$ emit(' increment ')} }，})new Vue({ El : ' # counter-event-example '，data : { total : 0 0 }，methods : { incrementtotal : function(){ this。total=1 } })/script/html(9501 . 163.com)

在某个组件的根元素上监听一个原生事件。可以使用。当地的修饰v-on。例如：

my-component v-:点击。native=' doTheThing '/my-component 5。2 .2派发事件——美元派单()

！DOCTYPE html html head meta charset=' UTF-8 ' title/title/head body div id=' app ' pmessages : { { messages | JSON } }/p子组件/子组件/div模板id='子组件'输入v-model=' msg '/按钮v-: click=' notify '调度事件/按钮/模板脚本src=' http : js/vue。js /脚本脚本/注册子组件Vue.component('child-component '，{ template : ' # child-component '，data : function(){ return { msg : ' ' })，方法： { notify : function(){ if(this。味精。trim()){ this } .$dispatch('child-msg '，this.msg) this.msg='' } } } }) //初始化父组件new Vue({ el: '#app ')、data: { messages: [] }、event s : { ' child-msg ' : function(msg){ this。消息。push(msg)} } })/script/body/html(9503 . 163.com)

子组件的按钮元素绑定了点击事件，该事件指向通知方法子组件的通知方法在处理时，调用了$调度，将事件派发到父组件的儿童消息事件，并给该该事件提供了一个味精参数父组件的事件选项中定义了儿童消息事件，父组件接收到子组件的派发后，调用儿童消息事件。5.2.3 广播事件——美元广播()

！DOCTYPE html html head meta charset=' UTF-8 ' title/title/head body div id=' app ' input v-model=' msg '/button v-: click=' notify ' broadcast Event/button child-component/child-component/div模板id=' child-component ' ul Li v-for=' messages中的项目'父组件录入了信息：{ { item } }/Li/ul/模板脚本src=' http : js/vue。js /脚本脚本//注册子组件Vue.component('child-component '，{ template : ' # child-component '，data : function(){ return { messages :[]}，event s 3360 { ' parent-msg ' : function(msg){ this。消息。push(msg)} })//初始化父组件new Vue({ El : ' # app }，data: { msg: '' }，methods : { notify : function(){ if(this。味精。trim()){这个.$broadcast('parent-msg '，这个。msg)} } })/脚本/正文/html和派发事件相反。前者在子组件绑定，调用$派单派发到父组件；后者在父组件中绑定，调用$广播广播到子组件。

5.2.4 父子组件之间的访问

父组件访问子组件：使用儿童或$refs子组件访问父组件：使用$家长子组件访问根组件：使用$ root $子级：

！DOCTYPE html html head meta charset=' UTF-8 ' title/title/head body div id=' app ' parent-component/parent-component/div模板id=' parent-component ' child-component 1/child-component 1 child-component 2/child-component 2按钮v-:点击=' showchildcomponent data '显示子组件的数据/按钮/模板模板id='子组件1 ' H2这是子组件1/H2/模板模板id='子组件2 ' H2这是子组件2/H2/模板脚本src=' http : js/vue。js /脚本脚本vue。组件('父组件'，{模板： ' #父组件'，组件： { '子组件1 ' 33: {模板33: ' #子组件1 '，数据33:我喜欢这个$ children . lenti){ alert(这个。$儿童[i].msg) } } } })新Vue({ El : ' # app ' })/脚本/正文/html

$ref可以给子组件指定索引身份证：

！DOCTYPE html html head meta charset=' UTF-8 ' title/title/head body div id=' app ' parent-component/parent-component/div模板id='父组件'！-子组件1/子组件1子组件2/子组件2子组件1v-ref : cc 1/子组件1子组件2v-ref : cc 2/子组件2按钮v-:点击=' showchildcomponent data '显示子组件的数据/按钮/模板模板id='子组件1 ' H2这是子组件1/H2/模板模板id='子组件2 ' H2这是子组件2/H2/模板脚本src=' http : js/vue。js /脚本脚本vue。组件('父组件'，{模板： ' #父组件'，组件： { '子组件1 ' 33: {模板33: ' #子组件1 '，数据33:我喜欢这个$ children . lenti){//alert(这个。$儿童[i].消息)//}警报(这参考文献。cc1。味精)；警惕（这个参考文献。cc2。味精)；} } })新Vue({ El : ' # app ' })/脚本/正文/html

效果与儿童相同。

$家长：

！DOCTYPE html html head meta charset=' UTF-8 ' title/title/head body div id=' app ' parent-component/parent-component/div模板id=“父组件”子组件/子组件/模板模板id='子组件' H2这是一个子组件/h2按钮v-:单击=' showParentComponentData '显示父组件的数据/button/template脚本src=' http : js/vue。js '/script脚本vue。组件(' parent-component '，{ template : ' # parent-component '，components : { ' child-component ' : { template : ' # child-component ')，方法： { showparentcomponentdata 3: function(){ alert(this .$parent.msg) } } } }，data : function(){ return { msg : ' parent component message ' } } })new Vue({ El : ' # app ' })/script/body/html(9509 . 163.com)

如开篇所提，不建议在子组件中修改父组件的状态。

5.2.5 非父子组件通信

有时候非父子关系的组件也需要通信。在简单的场景下，使用一个空的某视频剪辑软件实例作为中央事件总线：

var bus=new Vue()//触发组件A中的事件公共汽车$emit('id-selected '，1)//在组件B创建的钩子中监听事件公共汽车$on('id-selected '，函数(id) { //.})在更多复杂的情况下，可以考虑使用专门的状态管理模式。

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