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日

悬赏问题

  • ¥15 关于#ar#的问题:/* User can add his own implementation to report the HAL error return state */(语言-c语言)
  • ¥15 ImportError: DLL load failed while importing _iterative: 找不到指定的模块。
  • ¥15 如何通过交互分析得出某高危患者对放疗获益更多
  • ¥15 相关性分析中,p<0.05, r=0.29,怎么评价相关性呢
  • ¥15 docker部署Mongodb后输入命令报错?
  • ¥15 将下列流程图转变成python程序代码
  • ¥15 我需要全国每个城市的最新小区名字等数据。
  • ¥15 开发一个小区生态的小程序
  • ¥15 如何解决Excel中dependent dropdown list 的问题
  • ¥15 MddBootstrapInitialize2失败