非父子组件间传值(Bus/总线/发布订阅模式/观察者模式)

本文介绍如何使用Vue.js中的总线机制实现非父子组件间的值传递。通过创建全局总线实例,各组件能发送与接收事件,实现状态同步。示例展示了两个child组件间如何响应点击事件并更新对方的状态。

使用总线机制(bus)实现非父子组件间传值 

 在两个child组件间传值,实现点击一个child组件,另一个组件变成与此相同的值

<div id="root">
    <child content="the first value"></child>
    <child content="the second value"></child>
</div>
<script>
    Vue.prototype.bus=new Vue()
    Vue.component('child',{//定义一个全局组件
        props:{
            content: String
        },
        data: function(){
            return{
                selfContent:this.content
            }
        },
        template: '<div @click="handleClick">{{selfContent}}</div>',
        methods:{
            handleClick: function () {
                //alert(this.selfContent)
                this.bus.$emit('change',this.selfContent)
            }
        },
​​​​​​​       //在钩子函数中监听msg事件
        mounted:function (msg) {
            var this_=this;
            this.bus.$on('change',function (msg) {
                this_.selfContent=msg
            })
        }
    })
    var vm=new Vue({
        el: "#root"
    })
</script>

(待补充)

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值