Vue 2中template首个子元素使用component标签的可行性及替代方案咨询

写法合法性判断 #

你提供的写法完全合法可行，符合Vue 2的官方设计规范。
Vue 2中动态组件<component>的:is指令本身就支持两类有效值：

• 原生HTML标签的字符串名称
• 已注册的自定义组件的字符串名称
  你通过计算属性动态返回对应值的逻辑没有任何问题，只需要注意保证自定义组件MyBestComponent已经完成全局注册，或者在当前组件内完成局部注册即可，否则Vue会将其识别为未知自定义标签，无法正常渲染组件。

其他可替代的实现模式 #

根据不同的业务场景，还有两种常用的实现方式可以选择：

• v-if/v-else 分支渲染
  适合分支数量少（2-3种）、不同标签/组件的内部内容存在差异的场景，写法直观，可读性更高：

  <template>
    <li v-if="condition">
      <!-- li专属内容 -->
      ...
    </li>
    <MyBestComponent v-else>
      <!-- 组件专属内容 -->
      ...
    </MyBestComponent>
  </template>
  

• 渲染函数实现
  适合需要处理的动态标签/组件类型多、需要批量绑定属性/事件的场景，比模板写法更灵活，冗余代码更少：

  export default {
    render(h) {
      const targetTag = this.condition ? 'li' : 'MyBestComponent'
      return h(targetTag, {
        // 可统一动态注入props、事件监听器、类名等配置
        attrs: this.$attrs,
        on: this.$listeners
      }, this.$slots.default)
    }
  }
  

内容的提问来源于stack exchange，提问作者Wonderman