我想用Vue3 CDN构建项目（因为项目环境无法运行npm），所以我尝试用html+CDN创建组件。 但是当我尝试创建递归组件时，它只是渲染顶级元素。 有什么办法可以解决这个问题吗？
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<title>Form Example</title>
</head>
<body>
<div id="app">
<ul>
<menu-comp v-for="item in message" :key="item.id" :item="item"></menu-comp>
</ul>
</div>
</body>
<script type="module">
const {createApp, ref, } = Vue
const MenuComp = {
template: `
<li>{{ item.menuName }}
<ul v-if="item.subMenu.length>0">
<component is="menu-comp" v-for="subs in item.subMenu" :key="subs.id" :item="subs"></component>
</ul>
</li>
`,
props: ['item'],
}
const app = createApp({
setup() {
const message = ref([])
return {
message
}
},
mounted() {
this.getMenus();
},
components: {
"menu-comp": MenuComp,
},
methods: {
getMenus() {
axios.get('/api/menu', {
contentType: "application/json; charset=UTF-8",
}).then(r => {
const {data} = r;
this.message = data.results;
console.log(r);
});
}
}
}).mount('#app')
</script>
但是当我渲染此页面时
<div id="app" data-v-app="">
<ul>
<li>test1 <ul>
<menu-comp item="[object Object]"></menu-comp>
</ul>
</li>
<li>test2
<!--v-if-->
</li>
</ul>
</div>
``
为了达到预期的结果，为什么不在组件内使用插槽，然后再注入组件本身呢？...例如：
......
<div id="app">
<ul>
<menu-comp v-for="item in message" :key="item.id" :item="item">
{{message.menuName}}
<menu-comp
v-for="subItem in item.subMenu"
:key="subItem.id"
:item="subItem"
>{{subItem.menuName}}</menu-comp
>
</menu-comp>
</ul>
</div>
......
const MenuComp = {
template: `
<li>{{ item.menuName }}
<ul v-if="item.subMenu?.length>0">
<slot/>
</ul>
</li>
`,
props: ["item"],
};
......