在一个 .vue 文件中声明多个模板

Question

我在 .vue 文件中有一个组件，可以从重用代码块中受益。我知道我可以将该代码移动到单独的 .vue 文件并将其作为新组件导入。但是，该组件不会在其他任何地方使用，我想避免使目录混乱。是否可以在不使用代码中的template:"<div>.....</div>"内容的情况下在父级中声明此组件的模板？

这是想法：

<template>
  <div>
    ...some html here...
    <div v-for="item in items">
      {{item.name}}: 
      <div v-if="item.available">YES!</div>
      <div v-else>NO :(</div>     
    </div>    

    ...some other components and data here...

    <div v-for="item in items">
      {{item.name}}: 
      <div v-if="item.available">YES!</div>
      <div v-else>NO :(</div>
    </div>    
  </div>
</template>

我希望能够做这样的事情：

<template>
  <div>
    ...some html here...
    <div v-for="item in items">
      <itemizer inline-template v-model="item">
        {{value.name}}: 
        <div v-if="value.available">YES!</div>
        <div v-else>NO :(</div>
      </itemizer>
    </div>    

    ...some other components and data here...

    <div v-for="item in items">
      <itemizer v-model="item"/>
    </div>    
  </div>
</template>

但是，据我所知，这是不可能的。

Answer 1

不幸的是，Vue 的创建者似乎不支持这种模式：

我个人觉得语法比[单文件组件]更难维护

请注意，我们希望尽可能保持 SFC 语法一致，因为它涉及一个庞大的工具生态系统，需要支持任何添加的新功能（例如，Vetur 需要做一些非常不同的事情来处理具有多个脚本/模板的 SFC）。IMO 提出的语法并不能证明添加新语法是合理的。

https://github.com/vuejs/vue/pull/7264#issuecomment-352452213

这太糟糕了，因为即使除了灵活性和开发人员的选择之外，还有一个很好的理由是内联其他组件不使用的小函数以降低复杂性。这是 React 中的常见模式，并且在需要时不会抑制单文件组件。事实上，它允许随着内联组件的增长而逐渐迁移。

这是目前提供一些潜在解决方法的唯一资源之一： https://codewithhugo.com/writing-multiple-vue-components-in-a-single-file/

我已经尝试了所有这些，但目前对其中任何一个都不满意。您最多可以设置runtimerCompiler: true和使用模板字符串，但它会为您的包添加 10KB，并且您可能会错过元素中可用的完整语法突出显示<template>。也许你可以破解Teleport，但我还没有专门尝试过。