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.$rootApp.vue 组件（因为 App.vue 是所有组件的父组件）。是this.$root.children这个 App.vue 组件的子组件，这意味着所有其他组件都将在this.$root.children数组中？

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

Answer 1

这个.$root

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

this.$root.children

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

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

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

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

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

这行是什么意思？。我的意思是为什么我们要传递 :key="$route.fullPath" ？

• /sf/answers/3699366681/中有很好的解释