Как в приложении Vue проверить, доступен ли тег компонента?

Question

Допустим, у меня есть эта коллекция:

products: [
  { name: "ProductOne", value: 20 },
  { name: "ProductTwo", value: 30 },
  { name: "ProductRandom", value: 50 }
]

Я хочу иметь возможность использовать определенный c компонент на основе названия продукта или вернуться к значению по умолчанию:

<div v-for="product in products">
  <product-one-and-two :product="product" v-if="componentExists(product.name)"></product-one-and-two>
  <default-product v-else :product="product"></default-product>
</div>

Это слишком упрощенный пример, в реальной жизни у меня тысячи продуктов, и мы хотели бы просто создать файлы шаблонов c для конкретных продуктов или категорий, не засоряя главное приложение условными выражениями. Мы хотим, чтобы авторам компонентов не приходилось go через другую команду добавлять свой новый шаблон в конвейер.

Возможно ли это вообще с Vue?

Answer 1

Я бы сделал это с помощью динамических c компонентов <component :is=""></component>

  <component :product="product" :is="product.name"></component>

В :is вы можете динамически добавить имя компонента, и оно будет отображено.

Если вы создаете новый шаблон для продукта, вам просто нужно сделать 2 вещи.

Добавить новый объект в свой массив products

products: [
  { name: "ProductOne", value: 20 },
  { name: "ProductTwo", value: 30 },
  { name: "ProductRandom", value: 50},
  { name: "newProduct", value: 34 }
]

и зарегистрировать новый компонент.

import newProduct from "../path/to/newProduct.vue";
components: {
   newProduct
}