vue.js: 如何指定使用哪个子组件？

Question

在我的应用程序中有通用组件和品牌特定组件。假设我有 2 个品牌特定组件 Product_brand_A.vue 和 Product_brand_B.vue，我想将它们显示在列表中。父组件 ProductList.vue 是通用的（用于两个品牌）。

我在 ProductList.vue 中有哪些选项来指定要使用的子组件？

// ProductList.vue (generic)
import Product from 'Product.vue' // importing won't do
var ProductList = {
  components: {
    Product
  },
...
}

我不想导入两个子组件并在运行时决定，它应该是构建时解决方案。

Answer 1

如果您不想导入这两个子组件，那么您可能需要使用动态导入：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#Dynamic_Imports

然后你可以根据你传递给父级的一些属性动态导入你需要的子组件 (ProductList.vue)。

Answer 2

我认为最好在这里使用插槽 api。下面是列表组件的用法示例：

<ProductList :items="someProductsBrandA">
    <template v-slot:item="props">
        <Product_brand_A product="props.product">
        </Product_brand_B>
    </template>
</ProductList>

通过这种方式，您以后可以根据需要添加尽可能多的不同产品组件。您可以在此处查看插槽 API：https://vuejs.org/v2/guide/components-slots.html

vue.js: 如何指定使用哪个子组件？

vue.js: How to specify which child component to use?

javascript

inversion-of-control

vue.js

vue-component

vuejs2