vue.js：如何指定使用哪个子组件？答案

【问题标题】：vue.js: How to specify which child component to use?vue.js：如何指定使用哪个子组件？
【发布时间】：2019-12-20 07:39:11
【问题描述】：

在我的应用中有通用和品牌特定的组件。假设我有 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
  },
...
}

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

【问题讨论】：

我不认为它可以是构建时解决方案，因为这意味着在构建时您的编译器已经需要知道品牌特定组件中的一个，或者两者，或者没有将被使用。

标签： javascript vue.js vuejs2 vue-component inversion-of-control

【解决方案1】：

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

【讨论】：

我喜欢这个主意。你能再解释一下吗？列表模板的外观如何？

【解决方案2】：

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

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

然后您可以根据传递给父级 (ProductList.vue) 的一些道具动态导入所需的子组件。

【讨论】：