vue非父子组件传参（bus/总线/发布订阅者/观察者模式）

作者: blank的小粉er | 来源:发表于2018-06-14 16:09 被阅读0次

11.非父子组件之间的传值
Vue 非父子组件的数据传递
Vue组件通信
vue非父子组件传参（bus/总线/发布订阅者/观察者模式）
非父子组件的传值问题
Vue非父子组件间传值
vue 组件通信的5种方式
非父子组件间传值(Bus/总线/发布订阅模式/观察者模式)
非父子组件之间的传值(bus/总线/发布订阅模式/观察者模式)
非父子组件间的传值（Bus/总线/发布订阅模式/观察者模式）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="root">
        <child content="dell"></child>
        <child content="Lee"></child>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

    <script>
        Vue.prototype.bus=new Vue();

        Vue.component('child',{
            props:{
                content:String
            },
            data(){
                return{
                    selfContent:this.content
                }
            },
            template:'<div @click="handleClick">{{selfContent}}</div>',
            methods:{
                handleClick(){
                    this.bus.$emit('change',this.selfContent)
                }
            },
            mounted(){
                this.bus.$on('change',(msg)=>{          
                    this.selfContent=msg;
                    
                })
            }
        })


    var vm=new Vue({
        el:"#root"
    })
</script>
</body>
</html>