Vue Component标签

参考资料：Component | Vue , 动态组件 | Vue
渲染一个“元组件”为动态组件。依 is 的值，来决定哪个组件被渲染。

<!-- 组件会在 `currentTabComponent` 改变时改变 -->
<component v-bind:is="currentTabComponent"></component>

在上述示例中，currentTabComponent 可以包括

1. 已注册组件的名字
2. 一个组件的选项对象

这个 attribute 可以用于常规 HTML 元素，但这些元素将被视为组件，这意味着所有的 attribute 都会作为 DOM attribute 被绑定。

// html
<component :is="type" v-bind="linkProps(to)">
    <slot />
</component>
// js
computed: {
  isExternal() {
    return isExternal(this.to)
  },
  type() {
    if (this.isExternal) {
      return 'a'
    }
    return 'router-link'
  }
},
methods: {
  linkProps(to) {
    if (this.isExternal) {
      return {
        href: to,
        target: '_blank',
        rel: 'noopener'
      }
    }
    return {
      to: to
    }
  }
}