我们在使用vue做项目的时候,通信的必不可少的,我们一般都是使用$emit,$on来通信,
比如在组件A中点击一个事件,触发事件后,返回的数据要在B组件中展示。
A组件
<ul class="storm-wrap" v-show="stormlist.length!=0">
<li class="storm-item" v-on:click="sendstorm(item)" v-for="item in stormlist" :url="item.url">
{{item.name}}
</li>
</ul>
methods: {
sendstorm: function (item) {
var vm = this;
this.$emit('sendstorm', item.url)
},
}
B组件
<div id="main" v-cloak v-loading.fullscreen.lock="fullscreenLoading">
<storm-item v-on:sendstorm="geturl"></storm-item>
</div>
methods: {
geturl: function (url) {
showimg(url)
},
}
在A组件中$emit一个事件,可以传送参数,在b组件引用的时候,给组件绑定传过来的事件名,执行的方法是在B组件定义好的