AlexYeungVip 2023-04-23 10:05 采纳率: 100%
浏览 21
已结题

Vue组件引入报错，直接写到Vue实例内却正常，求解


<!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

如果不使用组件，直接写到实例里面的话能够正常跑，但不知道组件的引入哪里出错了，望指点。

  • 写回答

2条回答 默认 最新

  • AlexYeungVip 2023-04-23 10:27
    关注

    只在js中定义了自定义组件，而并未在html中使用自定义组件，故存在渲染错误。且自定义组件只能在Vue挂载的标签内使用。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题？

问题事件

  • 系统已结题 5月1日
  • 已采纳回答 4月23日
  • 创建了问题 4月23日