Vue3应用中展示多组件无内容输出，求问题排查

你遇到的核心问题是组件未定义渲染模板，Vue无法识别要展示的内容。你将渲染内容写在了组件标签内部，但这属于插槽内容，而你的组件既没有声明插槽，也没有指定template选项来告诉Vue该渲染什么。

修复方案1：给组件添加template选项 #

直接在组件定义中加入template字段，明确渲染内容：

const ImagePreview = {
    data(){
        return {
            image:"test.png"
        }
    },
    delimiters: ['[[', ']]'],
    template: `URL: [[image]]`
}
const Counter = {
    data() {
      return{counter: 0}
    },
    mounted() {
      setInterval(() => {
        this.counter++
      }, 1000)
    },
    delimiters: ['[[', ']]'],
    template: `Counter:[[counter]]`
}

Vue.createApp({
    components:{
        "image_preview":ImagePreview,
        "file_uploader":Counter
    }
}).mount('#app')

修复方案2：使用插槽保留组件标签内的内容 #

如果你想保留组件标签内部的写法，需要在组件中声明默认插槽：

const ImagePreview = {
    data(){
        return {
            image:"test.png"
        }
    },
    delimiters: ['[[', ']]'],
    template: `<slot></slot>`
}
const Counter = {
    data() {
      return{counter: 0}
    },
    mounted() {
      setInterval(() => {
        this.counter++
      }, 1000)
    },
    delimiters: ['[[', ']]'],
    template: `<slot></slot>`
}

额外注意 #

确保你引入的是Vue3的CDN资源（如<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>），如果误引入Vue2，Vue.createApp会报错，同样会导致页面无内容。

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