关于vue3报错Cannot read properties of undefined (reading 'component')的解释

本人也是vue的初学者,最近在搭建vue组件库的过程中,发现了一个vue2和vue3的区别点,具体体现在,使用vue3全局注册组件的时候(测试过程中使用),提示报错:Cannot read properties of undefined (reading 'component')

image-20220603001728779

具体原因是这样的:

在vue 2 中注册全局组件的时候使用的是 Vue.component,然后我们引入的是 import Vue from 'vue'

而我们在vue 3中引入的则是:import { createApp } from 'vue'

这时候,就算是我们从新引入 import Vue from 'vue'也会报错,这就需要继续分析 Vue 和 createApp 的创造机制

首先看看正确的使用方式:

vue 2 全局注册组件

import Vue from 'vue'
import TkBadge from './components/TkBadge'
import App from './App.vue'
​
Vue.component('TkBadge', TkBadge) // 全局注册 - 我们可以在任何地方使用
​
new Vue({
  render: h => h(App)
}).$mount('#app')

vue 3全局注册组件

import { createApp } from 'vue'
import TkBadge from './components/TkBadge'
import App from "./App.vue"
​
const app = createApp(App)
​
app.component('TkBadge', TkBadge)
​
app.mount('#app')

new Vue 和 createApp 的区别

可以参考:https://blog.51cto.com/u_15283585/4917386

隐藏模块

点击下面的广告小卡片,打开隐藏内容!!
本内容还在测试中,待上线
© 版权声明
THE END
喜欢就支持一下吧
点赞8 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容