this.$root 在组件中是什么意思？

Question

我有一个主要的 App.vue 组件。在那里，我有以下代码：

export default {
  data() {
    return {
      testVariable:false
    }
  },
}
</script>

<template>
  <VApp :dark="testVariable:false"
    <div id="app">
      <RouterView :key="$route.fullPath" />
    </div>
  </VApp>
</template>

然后在其中一个组件中，我有以下代码：

data() {
    return {
      testVariable: this.$root.$children[0].testVariable,
    }
  },

methods: {
    darkModeToggle(e) {
      this.$root.$children[0].testVariable = e
    },
  },

问题 1) this.$root 和 this.$root.children 是什么意思？是this.$root 总是 App.vue 组件（因为 App.vue 是所有组件的父级）。 this.$root.children 是这个 App.vue 组件的子组件，这意味着所有其他组件都将在 this.$root.children 数组中？

问题2）这条线是什么意思？<RouterView :key="$route.fullPath" />。我的意思是我们为什么要通过:key="$route.fullPath"?

Answer 1

this.$root

• 当前组件树的根 Vue 实例。 https://vuejs.org/v2/api/#vm-root

this.$root.children

• 当前实例的直接子组件。 https://vuejs.org/v2/api/#vm-children

this.$root 总是 App.vue 组件吗？

• 没有。 App.vue 有一个父组件，它是 main.js 中的 new Vue(...)。所以new Vue(...) 是实际的$root

this.$root.children 是这个 App.vue 组件的子组件，这意味着所有其他组件都将在 this.$root.children 数组中吗？

• .children 是直接子组件，而不是后代。在这种情况下，$root 只有 1 个直接子代，即 App.vue

这条线是什么意思？ .我的意思是我们为什么要通过 :key="$route.fullPath"？

• 在https://stackoverflow.com/a/52848095/5599288 中有很好的解释