vue3動態(tài)組件使用詳解
更新時間:2023年02月27日 08:17:53 作者:不叫貓先生
這篇文章主要介紹了vue3動態(tài)組件使用詳解的相關(guān)資料,需要的朋友可以參考下
- markRow:標(biāo)記一個對象,使其不能成為一個響應(yīng)式對象。
- toRaw:將響應(yīng)式對象(由 reactive定義的響應(yīng)式)轉(zhuǎn)換為普通對象。
- shallowRef:只處理基本數(shù)據(jù)類型的響應(yīng)式, 不進行對象的響應(yīng)式處理。
- shallowReactive:只處理對象最外層屬性的響應(yīng)式(淺響應(yīng)式)。
??問題:為什么vue3需要對引入的組件使用markRow???
vue2
<template> <div> <component :is="A"></component> </div> </template> <script> import A from './A'; export default { name: 'Home', data() { return {} }, components: { A }, }
vue3
<template> <ul> <li v-for='(item,index) in tabList' :key='index' @click='change(index)' > {{ item.name }} </li> </ul> <keep-alive> <component :is="currentComponent"></component> </keep-alive> </template> <script setup> import A from '../components/A.vue' import B from '../components/B.vue' import C from '../components/C.vue' let tabList = reactive([ {name:'組件A',com:markRaw(A)}, {name:'組件B',com:markRaw(B)}, {name:'組件C',com:markRaw(C)} ]); let currentComponent = reactive({ com:tabList[0] }); const change = ( idx )=>{ currentComponent = tabList[idx].com; }
到此這篇關(guān)于vue3動態(tài)組件使用詳解的文章就介紹到這了,更多相關(guān)vue3動態(tài)組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
您可能感興趣的文章:
相關(guān)文章
element修改form的el-input寬度,el-select寬度的方法實現(xiàn)
有時候像form表單這樣,頁面的input、select等寬度不一定會是一樣的,可能有些長,有些短,本文就介紹了如何element修改form的el-input寬度,el-select寬度的方法實現(xiàn),感興趣的可以了解一下2022-02-02vue獲取元素寬、高、距離左邊距離,右,上距離等還有XY坐標(biāo)軸的方法
今天小編就為大家分享一篇vue獲取元素寬、高、距離左邊距離,右,上距離等還有XY坐標(biāo)軸的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09element-plus中如何實現(xiàn)按需導(dǎo)入與全局導(dǎo)入
本文主要介紹了element-plus中如何實現(xiàn)按需導(dǎo)入與全局導(dǎo)入,文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-11-11解決@vue/cli安裝成功后,運行vue -V報:不是內(nèi)部或外部命令的問題
這篇文章主要介紹了解決@vue/cli安裝成功后,運行vue -V報:不是內(nèi)部或外部命令的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10