Vue入门 Demo17 非父子组件间的传值

城南花已开呀

于 2020-03-07 13:11:47 发布

阅读量145

点赞数

分类专栏： Vue

本文链接：https://blog.youkuaiyun.com/qq_36778310/article/details/104713292

版权

Vue 专栏收录该内容

20 篇文章

订阅专栏

Vue入门 Demo17 非父子组件间的传值

<!DOCTYPE html>
<html lang="en"> 
    <head> 
        <meta content="text/html; charset=utf-8" /> 
        <title>非父子组件间的传值(Bus/总线/发布订阅模式/观察者模式)</title> 
        <script src="./vue.js"></script>
        
    </head> 
    <body>
        <div id="app">  
            <child content="he"></child>
            <child content="wen"></child>
        </div>
        <script>

            //在实例上挂载bus,总线
            Vue.prototype.bus = new Vue()

            Vue.component('child',{
                data: function(){
                     return {
                        selfContent: this.content
                     }
                },
                template: '<div @click="handleClick">{{selfContent}}</div>',
                props:  {
                    content: String
                },
                methods: {
                    handleClick: function(){
                        this.bus.$emit('change',this.selfContent)
                    }
                },
                //vue的生命钩子
                mounted: function(){
                    var this_ = this
                    this.bus.$on('change', function(msg){
                        this_.selfContent = msg
                    })  
                }
            })
        
            var vm = new Vue({
                el: "#app",
                methods: {
                    
                }
            })
        </script> 
    </body> 
</html>