脚本宝典收集整理的这篇文章主要介绍了Vue 2 | Part 8 组件通信,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
当组件监听到用户的行为,需要触发一些界面交互的时候,实例与组件之间、组件相互之间就需要进行通信了。Vue里面有两个api可以帮助我们轻松地完成这件事,它们是$on
和$emit
。
先来看一下我们最后要完成的效果吧。初始状态:
点击按钮以后隐藏文字:
<div id="app">
<div class="boxWrapper">
<div>I am your Big Box</div>
</div>
<toggle-btn></toggle-btn>
</div>
Vue.component('toggle-btn', {
template: '<button class="btn btn-info">Toggle Box</button>'
})
var app = new Vue({
el: '#app'
})
我们把按钮做成一个简单的组件,那应该怎么获取按钮监听到的点击事件,传给big box呢?
用户点击的时候,是在toggle-btn
这个组件上触发了事件,所以我们信号的源头,肯定是在它身上。Vue允许我们监听组件上的自定义事件,像这样:
<toggle-btn v-on:toggle-box="toggleBox"></toggle-btn>
这里有几点需要注意的:
自定义的事件,需要用中划线分词,在HTML和JS都是。用驼峰分词是完全没有效果的。
虽然监听的是组件的自定义事件,但后面触发的这个toggleBox
方法,是在Vue实例上的。
这里是监听的是自定义的事件,真正的click
事件,是在组件内部进行监听(下面会解释)。
所以上面的这行HTML的意思,其实是,当Vue实例监听到组件上自定义的toggle-box
事件被触发,就会执行它的toggleBox
方法。
被监听的事件有了,这个组件到底要怎么把信号发布出来,让Vue实例监听到呢?我们直接来看下面这段代码。
在组件的内部监听到用户的click
事件后,执行自身的方法,把信号发布出去。
Vue.component('toggle-btn', {
template: '
<button
class="btn btn-info"
v-on:click="emmitToggle">Toggle Box</button>
',
methods: {
emmitToggle: function() {
// 用户点击之后,发布信号
this.$emit('toggle-box')
}
}
})
接收到信号以后,我们希望可以toggle文字的显示,最直接的当然是在实例上的data
里面初始化一个showBox
为true
,执行toggleBox
方法的时候对它进行操作。同时,big box里面的文字通过v-show
指令来控制是否显示。
<div class="boxWrapper">
<div v-show="showBox">I am your Big Box</div>
</div>
var app = new Vue({
el: '#app',
data: {
showBox: true
},
methods: {
toggleBox: function() {
this.showBox = !this.showBox
}
}
})
组件监听用户行为(我们的例子里是点击)
用户点击,触发组件自身的方法并发布信号($emit
):我这边的toggle-box
事件被触发了
HTML中的v-on
指令捕捉到这个信号,执行Vue实例下的toggleBox
方法
showBox
的值被修改,v-show
对文字进行隐藏或显示
其实$emit
方法是挂在Vue实例下,每一个Vue实例都会有$emit
和$on
方法。所以可以直接把vue实例作为一个event bus,在组件之间进行通信。
这里简单地举个例子。比方说,我们希望点击toggle按钮以后,另外一个组件可以接收到这个信号。
toggle-btn
基本不变,只是改为使用event bus的$emit
方法。listener
中也同样使用event bus的$on
对信号进行监听。
<div id="app">
<listener></listener>
<toggle-btn></toggle-btn>
</div>
var bus = new Vue()
Vue.component('toggle-btn', {
template: '
<button
class="btn btn-info"
v-on:click="emmitToggle">Toggle Box</button>
',
methods: {
emmitToggle: function() {
// 注意这里使用的是bus,不是this
bus.$emit('toggle-box')
}
}
})
Vue.component('listener', {
template: '<h5>sibling component</h5>',
mounted: function () {
bus.$on('toggle-box', function () {
alert('已经接收到toggle-box信号!')
})
}
})
var app = new Vue({
el: '#app'
})
源码地址:https://github.com/levblanc/v...
视频攻略:小的不才,为求一赞,自制 本期视频攻略 在此。
以上是脚本宝典为你收集整理的Vue 2 | Part 8 组件通信全部内容,希望文章能够帮你解决Vue 2 | Part 8 组件通信所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。