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

我认为最好在这里使用slot 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