vue非父子组件传参（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>
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容