.sync修飾符
比如之前一直這樣寫:（update事件正常寫）
current-page.sync="currentPage"
但是vue3就不行了位衩，改成
v-model:current-page="currentPage" 就可以了
vue3中組件跳轉(zhuǎn)之后頁面不顯示
可能的原因有很多，大部分是路由和組件引入的問題肥荔，除此之外還要注意內(nèi)置組件transition的使用帶來的問題。僅支持單個元素或組件作為其插槽內(nèi)容。如果內(nèi)容是一個組件因痛，這個組件必須僅有一個根元素。
這一點在官方文檔可以看到岸更。
Image.png
Vue3中使用component :is 加載組件
1.不使用setup語法糖鸵膏，這種方式和vue2差不多，is可以是個字符串
- 使用setup語法糖怎炊，這時候的is如果使用字符串會加載不出來谭企，得使用組件實例
<template>
<Child1 />
<Child2 />
<component :is="currentComp"></component>
<el-button @click="compChange">切換組件</el-button>
</template>
<script setup>
import { shallowRef, ref } from 'vue'
import Child1 from './Child1.vue'
import Child2 from './Child2.vue'
//這里用ref的話，vue給出警告Vue接收到一個組件评肆，該組件被制成反應(yīng)對象债查。這可能會導(dǎo)致不必要的性能開銷，應(yīng)該通過將組件標(biāo)記為“markRaw”或使用“shallowRef”而不是“ref”來避免瓜挽。
// 如果使用 markRaw 那么currentComp將不永遠(yuǎn)不會再成為響應(yīng)式對象盹廷。 所以得使用 shallowRef
const currentComp = shallowRef(Child1)
// 1)切換組件
// const compChange = () => {
// if(currentComp.value == Child1) {
// currentComp.value = Child2
// }else {
// currentComp.value = Child1
// }
// 2)也可以動態(tài)切換組件，這樣就不用在上面引入了
currentComp.value = defineAsyncComponent(() => import('./Child2.vue'))
}
</script>
-
如果 import 里面有變量
如果 import 里面有變量久橙，上面的方法2 本地開發(fā)沒問題俄占，但打包部署后引入多級目錄下會報錯
image.png
vite2中的解決方案：import.meta.glob
import.meta.glob 獲取到的文件就是懶加載的管怠，避免了使用 import 語句， 所以打包后不會報錯不存在動態(tài)引入了
const compChange = path => {
// 首先把需要動態(tài)路由的組件地址全部獲取
const modules = import.meta.glob('../views/**/*.vue')
// 然后動態(tài)路由的時候這樣來取
currentComp.component = defineAsyncComponent(modules[`../views/${path}.vue`])
}
