我在 app.vue 里写了这么一个结构，打算通过 v-bind:is="view" 来切换不同的页面。

大概的结构是这样的：

 app.vue  
      /      \
     /        \
login.vue   chat.vue
               |
               |
          contentbox.vue

现在，我需要在 login.vue 上，向 contentbox.vue 发送一个数据，于是我使用事件来传递数据，通过 vm.$dispatch 和 vm.$broadcast 来往上和往下传播事件。

但是，当我在 login.vue 上把 app.vue 的 view 切换到 chat.vue 后，我发现 chat.vue 并不能接收到我传递的事件，更无法传递到 contentbox.vue 。

不明白这哪里出错了，或者大家有没有别的方法来传递数据呢？请各位指教指教。

以下是代码：

app.vue

 <template>
    <div class="container">
        <div class="col-md-6 col-md-offset-3">
            <component v-bind:is="view"></component>
        </div>
    </div>
</template>

<script>

module.exports = {
    events: {
        test: function (data) {
            // app.vue 接收到下层传上来的 test 后，往下广播 test 事件
            console.log('app.vue: got it.')
            this.$broadcast('test', data)
            return false
        }
    }
}

</script>

login.vue

 <script>

module.exports = {
    ready: function(){

        // 监听 socket.io 的 login-success 事件
        this.$root.socket.on('login-success', function(data){
            this.$parent.view = 'chat'
            history.pushState null, null, '#/chat'

            // 切换页面后向上传播 test 事件
            console.log('login.vue:sent')
            this.$dispatch('test', data)
        })
    }
}
</script>

chat.vue

 <template>
    <inputbox></inputbox>
    <contentbox></contentbox>
</template>
<script>

module.exports = {
    events: {
        test: function (data) {
            console.log('chat.vue: got it.') // 并不能收到
        }
    }
} 

</script>

contentbox.vue

 <script>

module.exports = {
    events: {
        test: function (data) {
            console.log('contentbox.vue: got it!') // 当然也到不了这里
            console.log('data:', data)
            return false
        }
    }
}

</script>