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

这是$ 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

$ root在组件中意味着什么？

1 个答案: