时间戳

首页 > 解决方案 > 将根属性添加到 vue 应用程序的问题

vue.js - 将根属性添加到 vue 应用程序的问题

问题描述

有人能告诉我这个设置有什么问题吗，我想在创建 vue 应用程序之前加载一个 config.json 文件并使用 this.$root.config 访问组件中的配置。没有我可以访问的根配置元素？遗漏了什么？谢谢你的帮助！config.json 文件已正确加载，可以将配置记录到控制台。但它不是从 Vue 添加到根属性中的吗？

fetch('/config.json')
.then(res => res.json())
.then(config => {
    createApp(App, {
        data() {
            return config
        },
        created() {
            console.log(this.$root.config);
        }
    }).use(store).use(router).use(i18n).mount('#app');
});

标签： vue.js

解决方案

正如 Abdelillah 指出的那样，您放置的data内容不会出现在. 但是，由于 App是根组件，因此您可以只使用. 在任何子组件中，您都必须使用.$root$root.$datathis.configthis.$root.$data.config

但是 Vue 3 提供了一种更简洁的替代方案来为应用程序中的任何组件提供数据：config.globalProperties。

例子：

const app = Vue.createApp({});
app.component('test', {
  mounted() {
    console.log(this.config);
  }
});  

Promise.resolve({
  foo: 'bar'
}).then(config => {
  app.config.globalProperties.config = config;
  app.mount('#app');
});
<script src="https://unpkg.com/vue@next/dist/vue.global.prod.js"></script>
<div id="app">
  <test />
</div>

如您所见， logging输出 上的<test>集合，并且对于应用程序中的任何组件都将是相同的。.configglobalProperty.configapp

如果您想向当前组件的任何后代提供数据（无论多深，跳过中间父级），您可以使用provide/inject。虽然我发现这对于为特定组件的所有子组件（而不是应用程序的其余组件）提供一些数据特别有用，但它显然可以在根组件上使用，这将使provide跨应用程序通过inject任何地方都可用你需要它。

推荐阅读