如何在x-template脚本标签中使用可搜索Vue-Multiselect组件

可行性结论 #

将已注册的Vue组件插入text/x-template类型脚本标签的操作完全可行，无需强制更换其他标签实现。

正确实现方式 #

你之前在模板中写<multiselect></multiselect>的写法本身没有语法问题，只要提前完成组件注册，就可以和使用原生HTML标签一样在x-template内调用已导入的Vue组件，具体步骤如下：

• 提前完成vue-multiselect的注册，保证组件在当前Vue实例的作用域内可用：
  全局注册示例：

  import Vue from 'vue'
  import Multiselect from 'vue-multiselect'
  // 注册的标签名要和模板里写的标签名对应
  Vue.component('multiselect', Multiselect)
  

  局部注册示例（仅当前Vue实例可用）：

  new Vue({
    el: '#app',
    // 局部注册组件
    components: { Multiselect },
    // 引用你写的x-template
    template: '#questions-template',
    data() {
      return {
        selectedVal: null,
        options: []
      }
    }
  })
  

• 在x-template中正常使用组件即可，绑定props、事件的写法和在其他模板中使用完全一致：

  <script type="text/x-template" id="questions-template">
    <div class="question-container">
      <span>题目关联分类</span>
      <multiselect
        v-model="selectedVal"
        :options="options"
        placeholder="请选择分类"
      ></multiselect>
    </div>
  </script>
  

常见渲染失败排查点 #

如果组件没有正常渲染，优先检查以下问题：

• 组件注册名和模板内的标签名是否匹配，建议统一使用短横线命名（比如multiselect、vue-multiselect）避免大小写导致的匹配失败。
• Vue2环境下x-template内的内容需要有且仅有一个根节点，多个平级元素需要用外层标签包裹。
• x-template脚本标签不要放在Vue实例挂载的DOM节点内部，否则会被提前解析导致模板异常。

可选替代方案 #

如果后续遇到x-template语法高亮差、特殊字符转义麻烦的问题，也可以选择以下方案替代，效果完全一致：

• 直接使用无type属性的原生<template>标签存放模板，通过id给Vue实例引用即可。
• 配合构建工具直接在Vue实例的template选项中写模板字符串，或使用.vue单文件组件开发。

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