鍍金池/ 問答/HTML/ 關(guān)于vue.js中非父子組件通信的問題

關(guān)于vue.js中非父子組件通信的問題

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>NonParent-ChildDemo</title>
    </head>
    <body>
        <div id="non-parent-child-demo">
            <component-a></component-a>
            <component-b></component-b>
        </div>
    </body>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        var bus = new Vue();
        Vue.component('component-a', {
            data: function () {
                return {
                    letter: ''
                }
            },
            template: '<select v-model="letter"><option>A</option><option>B</option><option>C</option></select>',
            watch: {
                letter: function(){
                    console.log(this.letter);
                    bus.$emit('letter-selected',this.letter);
                }
            },
            model: {
                event: 'selectLetter'
            }
        });
        Vue.component('component-b', {
            template: '<span>{{ selected }}</span>',
            data: function () {
                return {
                    selected: 'A'
                }
            },
            created () {
                bus.$on('letter-selected', function(letter) {
                    this.selected = letter;
                    console.log('selected:' + this.selected);
                })
            }
        });
        vm = new Vue({ 
            el: '#non-parent-child-demo'
        });
    </script>
</html>

這里span中的selected為什么不是響應(yīng)式的？

回答
編輯回答
久不遇

this 指向的不是component-b的實例

Vue.component('component-b', {
            template: '<span>{{ selected }}</span>',
            data: function () {
                return {
                    selected: 'A'
                }
            },
            mounted () {
                var vm = this
                bus.$on('letter-selected', function(letter) {
                    vm.selected = letter;
                    console.log('selected:' + vm.selected);
                })
            }
        });
2017年5月18日 19:54
編輯回答
墨小羽

this綁定問題，解決辦法：
用bind

bus.$on('letter-selected', function(letter) {
    this.selected = letter;
    console.log('selected:' + this.selected);
}.bind(this))

或者箭頭函數(shù)

bus.$on('letter-selected', letter => {
    this.selected = letter;
    console.log('selected:' + this.selected);
})
2017年3月13日 19:31
編輯回答
司令

打斷點試試吧，先看一下component-a的watch是否生效了，然后看letter-selected是否生效了

2018年3月10日 21:14