vue非父子組件之間的傳值--bus（總線/觀察者模式）

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>