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

Posted 2023-02-23

【中文标题】如何在js文件中加载vue组件

【英文标题】：How to load a vue component in js file

【发布时间】：2020-07-14 05:22:06

【问题描述】：

我将获得以下行为：如果在我的数据库中存在某个条件，我将加载特定的 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 文件而不是控制器中调用数据是一种不好的做法？

【参考方案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

【讨论】：

也谢谢你。在 js 文件中做是一个好习惯吗？我的意思是，从 db 加载数据

如果你有一些与此相关的逻辑，那么我想是的

但如果它不是 SPA，那么您可以提供来自控制器的标志并使用没有 AJAX 调用的示例。

【参考方案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>
    `
)

【讨论】：

感谢您的回答，但条件是，我需要从 db 加载的变量，我应该从 ajax 请求中提取它吗？

是的，例如，您可以使用axios

不是答案吗？