<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>定义组件</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({})
const vueComponent = {
data() {
return {
msg: '你按下了按钮',
count: 0
}
},
methods: {
btnClick() {
alert(this.msg + ++this.count + '次')
}
},
template: `
<button @click='btnClick'>按钮</button>
按钮按下了{{count}}次</div>
`
}
app.component("my-alert", vueComponent);
app.mount('#root');
</script>
</html>
如上述代码,组件运行后会报错:
vue@next:1616 [Vue warn]: Component is missing template or render function.
at <App>
warn$1 @ vue@next:1616
finishComponentSetup @ vue@next:8759
setupStatefulComponent @ vue@next:8661
setupComponent @ vue@next:8583
mountComponent @ vue@next:6945
processComponent @ vue@next:6920
patch @ vue@next:6522
render @ vue@next:7680
mount @ vue@next:5926
app.mount @ vue@next:10819
(匿名) @ component.html:74
如果不使用组件,直接写到实例里面的话能够正常跑,但不知道组件的引入哪里出错了,望指点。
Vue组件引入报错,直接写到Vue实例内却正常,求解
- 写回答
- 好问题 0 提建议
- 追加酬金
- 关注问题
- 邀请回答
-
2条回答 默认 最新
- AlexYeungVip 2023-04-23 10:27关注
只在js中定义了自定义组件,而并未在html中使用自定义组件,故存在渲染错误。且自定义组件只能在Vue挂载的标签内使用。
本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏 举报
悬赏问题
- ¥15 动力学代码报错,维度不匹配
- ¥15 Power query添加列问题
- ¥50 Kubernetes&Fission&Eleasticsearch
- ¥15 有没有帮写代码做实验仿真的
- ¥15 報錯:Person is not mapped,如何解決?
- ¥30 vmware exsi重置后登不上
- ¥15 c++头文件不能识别CDialog
- ¥15 Excel发现不可读取的内容
- ¥15 关于#stm32#的问题:CANOpen的PDO同步传输问题
- ¥20 yolov5自定义Prune报错,如何解决?