无涯教程网

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

发布于09月24日

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

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

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

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

app.$appName = 'Vue3';

我可以从mounted()和this.$root.$appName中访问this，如何在setup()中访问？

UPDATE

我可以访问它，如果我使用它:

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

但是，如果我必须对每个文件都这样做，这是一个麻烦.

UPDATE 2

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

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

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

推荐答案

看来你需要provide / inject英镑.在你的App.vue中:

import { provide } from 'vue';

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

或者用你的app:

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

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

然后在你想要访问这个变量的任何子组件中，inject它:

import { inject } from 'vue'

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

Vue.js相关问答推荐

何时将代码拆分为 Nuxt 中的组件？

TailwindCSS 为什么前者比后者重要？

路径别名在 vue 脚本块中不起作用

Vue3 动态渲染

避免在运行时向 Vue 实例或其根 $data 添加响应式属性

Vue.js 如何计算总数？

VueJS 组件中的图像未加载

Vuejs 2，VUEX，编辑数据时的数据绑定

将 props 传递给 Vue 组件中的元素属性

Keycloak：用户基于角色的客户端登录访问限制

在 Vue.js 中，为什么我们必须在导入组件后导出它们？

Vue.js 拦截器

Vuejs css 范围性能

在 VueJS 中观察元素的高度

使用 puppeteer 生成 PDF 而不保存

如何从 Vuex 操作访问 Vuex 状态属性？

Vue Cli 3：定义的输出路径

如果通过 jquery 更新，Vuejs 绑定不起作用

如何在 vue3 中的setup方法中发出事件？

组件(components)

实用课程推荐

相关教程推荐