我怎样做一个可以接受任何 prop 的vue组件？

f87krz0w 于 2023-03-03 发布在 Vue.js

关注(0)|答案(2)|浏览(104)

我知道我可以编写一个组件，该组件需要一个单独的prop来呈现一个图标，如下所示

<template>
<span class="material-symbols-outlined">{{ name }}</span>
</template>
...

但我想知道是否有可能创建一个VueJS组件（不一定是SFC），它将允许我说...

<Icon navigate_next />

而不是

<Icon name="navigate_next" />

我也想有它与适当的打字（因此，为什么我标记这与Typescript）

2条答案

基本上你可以传递一个对象的属性而不使用组件中的任何属性。
可以使用不带参数的v-bind。

<Icon v-bind="navigate_next" />

在脚本中**：**

navigate_next: {
  name: 'xyz'
}

将等同于**：**

<Icon :name="navigate_next.name" />

我认为props必须有一个固定的名称，这样vue才能绑定它，如果你使用一个没有被props绑定的属性，它会登陆到attrs，你可以从那里访问它。
但是，如果有多个属性，那么困难的部分是找出哪个属性描述了图标。
另一种可能性是使用时隙，即

<Icon>navigate_next</Icon>

下面是一个简单的例子：
x一个一个一个一个x一个一个二个x
不得不承认我觉得很滑稽。