我做了两个组件,并试图在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中不显示任何内容
我哪里错了?
2条答案
按热度按时间yyyllmsg1#
请重新阅读vue关于组件的文档,你知道你是否需要一个模板来呈现组件,我打赌你还没有读过vue关于组件的文档
以我为例,它会解决你的问题:
pkwftd7m2#
您的组件没有模板或呈现函数。如果添加了模板或呈现函数,您将看到以下内容: