javascript - Vue 组件版本控制，这样的事情可能吗？

Question

我目前根据需要动态导入我的组件，但是如果组件需要进行大量更改，我会想要制作它的新版本，但在某种程度上它仍然是相同的组件。

我的 app.js 中有以下内容:

Vue.component( 'favourites-panel', () => import('./components/Favourites/Panel.vue' );

我可以将上面的内容更改为类似的内容并从 prop 获取版本吗？显然这是理论代码!

Vue.component( 'favourites-panel', (e) => import('./components/Favourites/Panel' + e.version + '.vue' );

这就是我调用组件的方式:

<favourites-panel version="1"></favourites-panel>

Answer 1

不，不可能使用 props 对象对组件进行“版本控制”。
首先，您需要了解您在做什么:Vue.component 是一个全局加载所有您想要的组件的函数。您可以传递绝对路径，或者如果需要，也可以传递 promise 。
在这种情况下，您希望异步加载组件并使用 import 语句返回 Promise。如果您检查 e 属性，您将看到这是解析回调。
写作:

Vue.component( 'favourites-panel', () => import('./components/Favourites/Panel.vue' );

或者:

Vue.component('favourites-panel', function (resolve) {
  require(['./components/Favourites/Panel.vue'], resolve)
})

其实是一样的，都是返回一个 Promise 对象。
为了解决您的问题，您可以添加 environment variable然后加载 根据该特定环境变量的值的组件。