我们可以动态更改 VueJS 中的 HTML 标记吗？

Question

我有这样的代码：

<TabItem name="Font Family" :selected="true">
   <typography-font />
</TabItem>
<TabItem name="Typescale">
   <typescale />
</TabItem>
<TabItem name="Usage">
   <typography-usage />
</TabItem> .... and more <TabItem>

如果我想像这样使用 v-for 使其循环，是否可以动态替换 HTML 标签？

<tabItem v-for="directlink in links"> 
  <{{ directLink }}/> 
<tabItem>

Answer 1

您可以使用 Vue <component:is="componentName" />提供的动态组件。

查看您当前的设置，您可以使用对象数组来呈现您想要的项目。

例子：

// template
<TabItem v-for="(directlink, index) in links" :key="index" :name="directlink.name">
  <component :is="directlink.component"/>
</TabItem>

// script
data() {
  return {
    links: [
      {
        name: 'Font Family',
        component: 'typography-font'
      },
      {
        name: 'Typescale',
        component: 'typescale'
      },
      // ... etc. You could also load this data from a .json file.
    ]
  }
}

相关阅读：

https://v2.vuejs.org/v2/guide/components.html#Passing-Data-to-Child-Components-with-Props

https://v2.vuejs.org/v2/guide/components.html#Dynamic-Components