Uncaught TypeError: app.component is not a function

目录

文章目录

一、问题

二、原因

三、解决

四、总结

---

文章目录

一、问题

vue在根组件上添加 子组件时，报错 Uncaught TypeError: app.component is not a function

1.js代码

const appRoot = {
    data() {
        return {
            todoList:[
               {id:1,text:"learning vue"},
               {id:2,text:"reading"},
               {id:3,text:"call"}
            ]
        }
    },
    methods:{
        change(){
            this.message="bb"
        }
    }
}
app.component("todolist",{
    props:[`todo`],
    template:`<li>{{todo.text}}</li>`
})
app=Vue.createApp(appRoot);
app.mount("#app");

2.报错

二、原因

1.没有搞清楚vue应用中组件的加载过程，添加子组件的顺序错误

---

 

三、解决

1.vue应用组件加载顺序

        a.调用vue.createApp方法添加根组件创建应用

app=Vue.createApp(appRoot);

        b.在应用中添加子组件

app.component("todolist",{
    props:[`todo`],
    template:`<li>{{todo.text}}</li>`
})

        c.将应用挂载在html页面中

app.mount("#app");

2.解决方法：重新修改代码书写次序

const appRoot = {
    data() {
        return {
            todoList:[
               {id:1,text:"learning vue"},
               {id:2,text:"reading"},
               {id:3,text:"call"}
            ]
        }
    },
    methods:{
        change(){
            this.message="bb"
        }
    }
}

//1.创建应用
app=Vue.createApp(appRoot);
//2.给应用添加组件
app.component("todolist",{
    props:[`todo`],
    template:`<li>{{todo.text}}</li>`
})
//3.将应用挂载到页面上
app.mount("#app");

 

四、总结

        1.如果你也遇到Uncaught TypeError: app.component is not a function，请检查你的各个组件书写次序是否正确。

         2.由于初步接触vue,所以踩了较多的坑，希望能给初学者提供帮助。

/*希望对你有帮助！

如有错误，欢迎指正，谢谢！*/