在 Vue.js 3 setup() 中访问 this.$root

Question

在 Vue 2 中，您可以在 created 钩子中访问 this.$root 。在 Vue 3 中，本该放在 created 钩子中的所有内容现在都放在 setup() 中。

在 setup() 我们无权访问 this ，那么，我们如何访问根实例上的任何内容？

比如说，我在根实例上设置了一个属性：

 const app = createApp(App).mount('#app');

app.$appName = 'Vue3';

我可以访问 this setup() mounted() 带有—-与 this.$root.$appName

---

更新

我可以访问它，如果我 import 它：

 import app from '@/main';
...
setup() {
    console.log(app.$appName) // Vue3

但是，如果我必须对每个文件都这样做，这会很麻烦。

---

更新 2

另一个解决方法是在 provide() App.vue ，然后在任何其他组件中使用 inject() ：

 setup() {
    provide('$appName', 'Vue3')

 setup() {
    inject('$appName') // Vue3

原文由 Daniel_Knights 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

看来你需要 provide / inject 。在你的 App.vue ：

 import { provide } from 'vue';

export default {
  setup() {
    provide('appName', 'vue3')
  }
}

或者 provide 它与你的 app ：

 const app = createApp(App);
app.mount('#app');

app.provide('appName', 'Vue3');

---

然后在您想要访问此变量的任何子组件中， inject 它：

 import { inject } from 'vue'

export default {
  setup() {
    const appName = inject('appName');
  }
}

原文由 Psidom 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您可以在 vue 3 中定义 全局属性：

 app.config.globalProperties.appName= 'vue3'

使用 setup （组合 api），您可以使用 getcurrentinstance 来访问该属性：

 import { getCurrentInstance } from 'vue'
...
setup() {
    const app= getCurrentInstance()
    console.log(app.appContext.config.globalProperties.appName)

由于您仍然可以使用选项 api，您可以简单地执行以下操作：

 mounted(){
   console.log(this.appName)
}

原文由 Boussadjra Brahim 发布，翻译遵循 CC BY-SA 4.0 许可协议