举个例子:
组件一中有个分享按钮,点击分享按钮,展示组件二中的分享组件;
组件二分享组件有个取消按钮,点击关闭分享组件。
一、在main.js中添加一个bus实例:
Vue.prototype.bus = new Vue()
二、分享按钮 加点击事件;把这个true值传给组件二;
<a href="#"
class="wap-zl-share"
@click="sharecl">
</a>
<script>
export default {
data () {
return {
'iscancle': true
}
},
methods: {
sharecl () {
this.bus.$emit('sharecl', this.iscancle)
// console.log(this.iscancle)
}
},
}
</script>
三、默认组件二的分享组件为隐藏;组件二分享组件接受组件一传过来的值;点击取消按钮iscancle改为false
<div class="wapshare"
v-show="iscancle">
我是分享内容
<p class="share_cancle"
@click="cancle">取消</p>
</div>
<script>
export default {
data () {
return {
'iscancle': false,
}
},
created () {
this.bus.$on('sharecl', iscancle => {
this.iscancle = iscancle
})
},
methods: {
cancle () {
this.iscancle = false
// console.log(iscancle)
}
},
}
</script>
是不是很简单呀!加油呀!!!