vue3動(dòng)態(tài)組件使用詳解
- markRow:標(biāo)記一個(gè)對(duì)象,使其不能成為一個(gè)響應(yīng)式對(duì)象。
- toRaw:將響應(yīng)式對(duì)象(由 reactive定義的響應(yīng)式)轉(zhuǎn)換為普通對(duì)象。
- shallowRef:只處理基本數(shù)據(jù)類型的響應(yīng)式, 不進(jìn)行對(duì)象的響應(yīng)式處理。
- shallowReactive:只處理對(duì)象最外層屬性的響應(yīng)式(淺響應(yīng)式)。
??問(wèn)題:為什么vue3需要對(duì)引入的組件使用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動(dòng)態(tài)組件使用詳解的文章就介紹到這了,更多相關(guān)vue3動(dòng)態(tài)組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- vue3的動(dòng)態(tài)組件是如何工作的
- 詳解vue2.0 使用動(dòng)態(tài)組件實(shí)現(xiàn) Tab 標(biāo)簽頁(yè)切換效果(vue-cli)
- vue 動(dòng)態(tài)組件component
- Vue.js動(dòng)態(tài)組件解析
- vuejs動(dòng)態(tài)組件給子組件傳遞數(shù)據(jù)的方法詳解
- vue 動(dòng)態(tài)組件(component :is) 和 dom元素限制(is)用法說(shuō)明
- Vue 自定義動(dòng)態(tài)組件實(shí)例詳解
- vue動(dòng)態(tài)組件實(shí)現(xiàn)選項(xiàng)卡切換效果
- Vuejs第十二篇之動(dòng)態(tài)組件全面解析
- 詳解Vue 動(dòng)態(tài)組件與全局事件綁定總結(jié)
相關(guān)文章
element修改form的el-input寬度,el-select寬度的方法實(shí)現(xiàn)
有時(shí)候像form表單這樣,頁(yè)面的input、select等寬度不一定會(huì)是一樣的,可能有些長(zhǎng),有些短,本文就介紹了如何element修改form的el-input寬度,el-select寬度的方法實(shí)現(xiàn),感興趣的可以了解一下2022-02-02Vue中用props給data賦初始值遇到的問(wèn)題解決
這篇文章主要介紹了Vue中用props給data賦初始值遇到的問(wèn)題解決,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11vue獲取元素寬、高、距離左邊距離,右,上距離等還有XY坐標(biāo)軸的方法
今天小編就為大家分享一篇vue獲取元素寬、高、距離左邊距離,右,上距離等還有XY坐標(biāo)軸的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09element-plus中如何實(shí)現(xiàn)按需導(dǎo)入與全局導(dǎo)入
本文主要介紹了element-plus中如何實(shí)現(xiàn)按需導(dǎo)入與全局導(dǎo)入,文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-11-11解決@vue/cli安裝成功后,運(yùn)行vue -V報(bào):不是內(nèi)部或外部命令的問(wèn)題
這篇文章主要介紹了解決@vue/cli安裝成功后,運(yùn)行vue -V報(bào):不是內(nèi)部或外部命令的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10解決vue打包后vendor.js文件過(guò)大問(wèn)題
這篇文章主要介紹了解決vue打包后vendor.js文件過(guò)大問(wèn)題,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-07-07