vue3動態(tài)組件使用詳解
更新時間:2023年02月27日 08:17:53 作者:不叫貓先生
這篇文章主要介紹了vue3動態(tài)組件使用詳解的相關資料,需要的朋友可以參考下
- markRow:標記一個對象,使其不能成為一個響應式對象。
- toRaw:將響應式對象(由 reactive定義的響應式)轉換為普通對象。
- shallowRef:只處理基本數據類型的響應式, 不進行對象的響應式處理。
- shallowReactive:只處理對象最外層屬性的響應式(淺響應式)。
??問題:為什么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; }
到此這篇關于vue3動態(tài)組件使用詳解的文章就介紹到這了,更多相關vue3動態(tài)組件內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
element修改form的el-input寬度,el-select寬度的方法實現
有時候像form表單這樣,頁面的input、select等寬度不一定會是一樣的,可能有些長,有些短,本文就介紹了如何element修改form的el-input寬度,el-select寬度的方法實現,感興趣的可以了解一下2022-02-02vue獲取元素寬、高、距離左邊距離,右,上距離等還有XY坐標軸的方法
今天小編就為大家分享一篇vue獲取元素寬、高、距離左邊距離,右,上距離等還有XY坐標軸的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09解決@vue/cli安裝成功后,運行vue -V報:不是內部或外部命令的問題
這篇文章主要介紹了解決@vue/cli安裝成功后,運行vue -V報:不是內部或外部命令的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10