如何在js文件中加载vue组件

Question

我将获得以下行为：如果在我的数据库中存在某个条件，则将加载特定的vue.component而不是另一个。换句话说，我有一个名为discover.js的文件，该文件内包含以下代码：

Vue.component(
    'discover-component',
    require('./components/DiscoverComponent.vue').default
);

仅当用户（我在数据库中将特定的布尔值设置为true）时才调用DiscoverComponent.vue，否则我将调用另一个组件。这是一个伪代码示例：

If flag is true:

    Vue.component(
        'discover-component',
        require('./components/TrueDiscoverComponent.vue').default
    );

Else:

    Vue.component(
        'discover-component',
        require('./components/FalseDiscoverComponent.vue').default
    );

我应该在此文件.js中使用AJAX调用来加载flag的值吗？合法吗？还是在js文件而不是控制器中调用数据是一种不好的做法？

Answer 1

在这种情况下，我认为您可以使用异步组件。像这样的东西：

Vue.component('discover-component', async () => {
  const response = await fetch('/get-user'); 
  const user = await response.json();
  if (user.flag) {
    return import('./components/TrueDiscoverComponent.vue');
  }
  return import('./components/FalseDiscoverComponent.vue');
})

异步组件文档页面的链接：https://vuejs.org/v2/guide/components-dynamic-async.html#Async-Components

Answer 2

我宁愿这样：

import FalseDiscoverComponent from './components/FalseDiscoverComponent.vue'
import TrueDiscoverComponent from './components/TrueDiscoverComponent.vue'


Vue.component({
    'discover-component',

    components: {
        FalseDiscoverComponent, TrueDiscoverComponent 
    }

    template: `
        <div>
            <true-discover-component v-if="contidion" />
            <false-discover-component v-else />
        </div>
    `
})

Answer 3

我宁愿这样：

import FalseDiscoverComponent from './components/FalseDiscoverComponent.vue'
import TrueDiscoverComponent from './components/TrueDiscoverComponent.vue'


Vue.component({
    'discover-component',

    components: {
        FalseDiscoverComponent, TrueDiscoverComponent 
    }

    template: `
        <div>
            <true-discover-component v-if="contidion" />
            <false-discover-component v-else />
        </div>
    `
})