我正在尝试使用内联模板来渲染组件，这样我的 JS 中就不必包含 HTML。另外，我不需要编译步骤。
我不知道我做错了什么
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title>test component</title>
</head>
<body>
<h1>test component</h1>
<div id="app">
<p>mode: [[ mode ]]</p>
<main-component>
<template id="mainslot" inline-template>
<p>
[[ data ]]
</p>
</template>
</main-component>
</div>
<script type="importmap">
{
"imports":
{
"vue": "vue.esm-browser.js",
"main_vue": "testcomp.js"
}
}
</script>
<script src="testmain.js" type="module"></script>
</body>
</html>
testcomp.js
import { ref } from 'vue';
export default
{
name: 'MainComponent',
setup()
{
const data = ref([1,2,3]);
return {data};
},
template:'#mainslot'
};
testmain.js
import { createApp, ref } from 'vue';
import { default as MainComponent } from 'main_vue';
const myapp = createApp(
{
components:
{
MainComponent
},
setup()
{
return {
mode: 'blue'
};
},
}
);
myapp.config.compilerOptions.delimiters = ['[[', ']]'];
myapp.mount('#app');
当我加载页面时，呈现“模式：蓝色”，但我遇到两个问题：
[Vue warn]：无法解析组件：maincomponent 如果这是本机自定义元素，请确保通过 compilerOptions.isCustomElement 将其从组件解析中排除。
和
[Vue warn]：属性“data”在渲染期间被访问，但未在实例上定义。
为什么组件没有执行我想要的操作？
更新
我已将标签更改为
<main-component>[Vue warn]：模板元素未找到或为空：#mainslot
在
在
目前我正在使用不内联模板的解决方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title>test component</title>
</head>
<body>
<h1>test component</h1>
<div id="app">
<p>mode: [[ mode ]]</p>
<main-component>
</main-component>
</div>
<script type="importmap">
{
"imports":
{
"vue": "vue.esm-browser.js",
"main_vue": "testcomp.js"
}
}
</script>
<script src="testmain.js" type="module"></script>
<template id="mainslot">
<p>
[[ data ]]
</p>
</template>
</body>
</html>