通过 vue3 在应用程序中显示多个组件答案

【问题标题】：Showing muptiple components in an app by vue3通过 vue3 在应用程序中显示多个组件
【发布时间】：2023-02-03 21:45:36
【问题描述】：

我制作了两个组件并尝试在 vue3 应用程序中显示它们。

我的 html 代码

<div id="app">
    <image_preview>
        URL: [[image]]
    </image_preview>
    <file_uploader>
       Counter:[[counter]]
    </file_uploader>
</div>

在javascript中

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

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

但是 html 中什么也没有出现

我哪里错了？

【问题讨论】：

您是否在控制台中看到错误消息？你用Vue Developer tools看过了吗？平时帮我很多。它可以与其他组件或简单的 HTML 标签一起使用吗？
ImagePreview 是否应该有道具，以及通过道具名称属性传入的图像 url？

标签： javascript html vue.js vuejs3

【解决方案1】：

您的组件没有模板或渲染功能。如果你添加它，你会看到一些东西：

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

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

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id="app">
    <image_preview>
        URL: [[image]]
    </image_preview>
    <file_uploader>
       Counter:[[counter]]
    </file_uploader>
</div>

【讨论】：

【解决方案2】：

如果你需要一个模板来渲染组件，请重新阅读 vue 的组件文档，我敢打赌你还没有阅读 vue 的组件文档

按照我的例子，它会解决你的问题：

// </script><script type="module">
import { createApp, ref, onMounted } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'


const ImagePreview = {
  template: '#image_preview',
  setup() {
    return {
      image: 'test.png'
    }
  }
}
const Counter = {
  template: '#file_uploader',
  setup() {
    const counter = ref(0)
    
    onMounted(() => setInterval(() => counter.value++, 1_000))
    
    return { counter }
  }
}

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

<div id="app">
    <image_preview>
        URL: [[image]]
    </image_preview>
    <file_uploader>
       Counter:[[counter]]
    </file_uploader>
</div>

<template id="image_preview">
  URL: {{ image }}
</template>

<template id="file_uploader">
  Counter: {{ counter }}
</template>

【讨论】：