vue非父子组件之间的传值--bus（总线/观察者模式）

2019独角兽企业重金招聘Python工程师标准>>>

vue中父子组件的传值很简单，父组件向子组件传值通过属性的方式

    <div id="app">
        <hello :content="content"></hello>
    </div>

    <script type="text/javascript">
        /*vue父组件通过属性向子组件传值 */
        Vue.component('hello',{
            props: { //接受content属性 props校验,必须有并且是 String类型
                content: {
                    type: String,
                    required: true
                }
            },
            template: '<div>{{content}}</div>',
        })

        var vm = new Vue({
            el: '#app',
            data: {
                content: 'hello vue.'
            }

        })

    </script>

========================分割线========================

vue中子组件向父组件传值通过事件触发的方式 $emit

    <div id="app">
        <hello :content="content" @change="handlerChange"></hello>
        <div>{{childText}}</div>
    </div>

    <script type="text/javascript">
        /* vue子组件向父组件传值通过之间触发的方式 $emit */
        Vue.component('hello',{
            props: {
                content: {
                    type: String,
                    required: true
                }
            },
            data() {
                return {
                    childText:'child says...'
                }
            },
            template: '<div @click="handlerClick">{{content}}</div>',
            methods: {
                handlerClick: function(){
                    this.$emit('change' , this.childText) //触发父组件的change事件
                }
            }
        })

        var vm = new Vue({
            el: '#app',
            data: {
                content: 'hello vue.',
                childText:''
            },
            methods: {
                handlerChange: function(value){
                    this.childText = value
                }
            }
        })
    </script>

========================分割线========================

非父子组件怎么进行传值呢？可以使用vuex去共享数据，这部分下一篇讲，这里要讲的是总线bus方式进行传递，下面将hello组件的text传递给world组件

    div id="app">
        <hello></hello>
        <world></world>
    </div>

    <script type="text/javascript">

        //在生成vue实例前，给Vue的原型上添加一个bus属性，这个属性是vue的实例，

        //之后创建的vue实例都具有bus这个属性

        Vue.prototype.bus = new Vue();

        //组件hello
        Vue.component('hello', {
            data() {
                return {
                    text:'hello'
                }
            },
            template: '<div @click="handlerClick">{{text}}</div>',
            methods: {
                handlerClick: function(){
                    this.bus.$emit('sharetext', this.text)//触发事件sharetext
                }
            }
        })

        //组件world
        Vue.component('world', {
            data() {
                return {
                    text: ''
                }
            },
            template: '<div>{{text}} world</div>',
            mounted: function(){
                //let _this = this;因为this的指向发生了变化，不用箭头函数的话就要先把this保存起来

                this.bus.$on('sharetext', text => {//通过$on监听事件sharetext
                    this.text = text 
                })
            }
        })
        //根实例
        var vm = new Vue({
            el: '#app'
            
        })
    </script>

转载于:https://my.oschina.net/u/3229305/blog/1820279