Vue中使用inline template渲染组件报错，如何排查解决？

核心错误点 #

• inline-template 用法混淆：你错误地将inline-template和外部模板的写法混合使用了。inline-template的设计是直接把组件模板写在组件标签内部，不需要额外的<template>标签包裹，也不需要通过template选项指定选择器。
• 模板元素无法被查找：你把带id="mainslot"的<template>放在了<main-component>内部，Vue初始化时会在全局文档范围内查找该模板，但此时组件未被渲染，内部的模板元素处于组件标签的子节点中，无法被全局检索到，因此报错“找不到#mainslot”。
• data变量无法访问：由于模板未正确关联到组件，导致组件setup中返回的data变量无法被模板识别，触发“data未定义”警告。

修正方案（使用inline-template） #

1. 修改index.html的组件部分 #

移除内部的<template>标签，直接给组件标签添加inline-template属性，把模板内容写在组件标签内部：

<div id="app">
  <p>mode: [[ mode ]]</p>
  <main-component inline-template>
    <p>[[ data ]]</p>
  </main-component>
</div>

2. 修改testcomp.js #

删除组件配置中的template: '#mainslot'选项，因为inline-template已经指定了模板：

import { ref } from 'vue';

export default {
    name: 'MainComponent',
    setup() {
        const data = ref([1,2,3]);
        return {data};
    }
};

备选方案（使用外部模板） #

如果你更倾向于用外部模板而非inline-template，只需把<template id="mainslot">移到全局可访问的位置（比如<div id="app">外部），这样Vue就能正常查找：

1. 修改index.html #

<template id="mainslot">
  <p>[[ data ]]</p>
</template>
<div id="app">
  <p>mode: [[ mode ]]</p>
  <main-component></main-component>
</div>

2. testcomp.js保持不变 #

保留template: '#mainslot'选项即可。

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