在我的应用程序中有通用和品牌特定的组件。假设我有 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
},
...
}
我不想导入两个子组件并在运行时决定,它应该是一个构建时解决方案。
最佳答案
我认为这里使用 slot api 更好。以下是列表组件的使用示例:
<ProductList :items="someProductsBrandA">
<template v-slot:item="props">
<Product_brand_A product="props.product">
</Product_brand_B>
</template>
</ProductList>
这样您将来就可以添加任意数量的不同产品组件。您可以在此处查看插槽 API:https://v2.vuejs.org/v2/guide/components-slots.html
关于javascript - vue.js:如何指定使用哪个子组件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59421486/