javascript - vue router how to get $data of other components

Question

The structure of vue devtool is as follows

Root
    Header
    App
        comment

How to get app.vue (without vuex) comment.vue (name is set to comment) data

// 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

There are 2 communication methods between components in vue

1. The parent component uses props to pass data to the child component, and the child component uses emit to send events to notify the parent component

2. Use vuex

In fact, there is another way to define shared variables between components, such as global variables. This is similar to vuex, but vuex provides more control

Answer 2

Create a new empty vue instance for bus connection
It is written in the document