Javascript – Vue-Router, wie man $Daten anderer Komponenten erhält

Question

Die Struktur von vue devtool ist wie folgt

Root
    Header
    App
        comment

So erhalten Sie die Daten von comment.vue (Name ist auf Kommentar eingestellt) in app.vue (ohne Verwendung von vuex)

// app.vue
export default {
    name: 'app',
    data: () => ({
        from: 'form app'
    }),
    watch: {
        '$route': 'routeChange'
    },
    created () {
    },
    methods: {
        routeChange (to, from) {
            //这里如何获取comment.vue的data呢？
        }
    }
}

// comment.vue
export default {
    name: 'comment',
    data: () => ({
        test: '1'
    })
}

Answer 1

vue 里组件间通讯方式有 2 种

1. 父组件使用 props 传递数据给子组件，子组件使用 emit 发送事件通知父组件

2. 使用 vuex

其实还有一种，定义组件间的共享变量，例如全局变量，这个和 vuex 差不多，只是 vuex 提供了更多的控制

Answer 2

新建一个空的vue实例做总线连接
文档上有写