总结使用vue3开发遇到的问题

总结一下利用Vue3开发组件时跟着视频做还是碰到的各种奇怪的问题

• 1--- 父组件引用子组件时浏览器控制台出现如下警告，并且组件内容没有正常渲染出来

[Vue warn]: Invalid VNode type: true (boolean)
 at <Home onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > >
 at <RouterView>
 at <App>

在vue3中要引入defineAsyncComponent才能加载异步组件。

写法如下：

import { defineAsyncComponent } from 'vue'

export default {

    name: 'Home',

    components:{

       'a-button':defineAsyncComponent(()=>import('@/components/button'))
    }

}

• 2--- 引入element-ui报错

 main.js文件中是这样写的

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

createApp(App).use(router).use(ElementUI).mount('#app')

原因是：目前element-ui只支持2.6以下的版本，Vue3要使用element-ui就要使用element-plus

1.安装element-plus： npm install element-plus --save

2.在main.js中注册element-plus

注意与Vue2的注册有些不一样，先创建app 在用 use

main.js文件内容修改为： 

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import ElementPlus  from 'element-plus'
import 'element-plus/dist/index.css'

createApp(App).use(router).use(ElementPlus).mount('#app')

• 3--- 使用elementUI的插槽时显示为空白

使用 <template slot-scope="scope"> 时想要的内容就不显示了，为空白

在vue3.0中，插槽的使用方式已经改变了，所以是渲染不出来的。

注意：vue3使用 v-slot 代替了 slot；只能在template标签上使用 v-slot

elementUI中  slot-scope="scope"  的写法在vue3中变成如下

//匿名插槽格式
<template v-slot="scope">
	<slot :name="item.slot_name"></slot>
</template>


//具名插槽格式
<template v-slot:name="name">

//简略写法
<template v-slot:name>