vue3動(dòng)態(tài)組件使用詳解

更新時(shí)間：2023年02月27日 08:17:53 作者：不叫貓先生

這篇文章主要介紹了vue3動(dòng)態(tài)組件使用詳解的相關(guān)資料,需要的朋友可以參考下

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)式）。

??問題：為什么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)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

Vue2.x中的父組件傳遞數(shù)據(jù)至子組件的方法
這篇文章主要介紹了Vue2.x中的父組件數(shù)據(jù)傳遞至子組件的方法,需要的朋友可以參考下
2017-05-05
Ant?Design?Vue?Pagination分頁組件的封裝與使用
這篇文章主要介紹了Ant?Design?Vue?Pagination分頁組件的封裝與使用方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-04-04
Vue實(shí)現(xiàn)指令式動(dòng)態(tài)追加小球動(dòng)畫組件的步驟
這篇文章主要介紹了Vue實(shí)現(xiàn)指令式動(dòng)態(tài)追加小球動(dòng)畫組件的步驟，幫助大家更好的理解和實(shí)用vue，感興趣的朋友可以了解下
2020-12-12
Vue?項(xiàng)目中選擇?TSX?而非傳統(tǒng)?.vue?文件的原因分析
文章探討了Vue項(xiàng)目中使用TSX（TypeScript?JSX）的背景、優(yōu)勢(shì)和局限性,TSX結(jié)合了TypeScript和JSX,增強(qiáng)了類型安全和代碼組織性,但也增加了學(xué)習(xí)曲線和可讀性問題,對(duì)于復(fù)雜應(yīng)用,TSX提供了更大的靈活性和類型支持,逐漸成為一些開發(fā)者的選擇
2024-11-11
vue項(xiàng)目中的組件傳值方式
這篇文章主要介紹了vue項(xiàng)目中的組件傳值方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-06-06
Vue 無限滾動(dòng)加載指令實(shí)現(xiàn)方法
這篇文章主要介紹了Vue 無限滾動(dòng)加載指令的實(shí)現(xiàn)代碼，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下
2019-05-05
vue 條件渲染v-if和v-show
這篇文章主要介紹了vue 條件渲染v-if和v-show，在模板中，可以根據(jù)條件進(jìn)行渲染。條件用到的是v-if、v-else-if以及v-else來組合實(shí)現(xiàn)的，有時(shí)候我們想要在一個(gè)條件中加載多個(gè)html元素，那么我們可以通過template元素上實(shí)現(xiàn)，下面就來看看具體實(shí)現(xiàn)吧
2021-10-10
Vue3.0之引入Element-plus ui樣式的兩種方法
本文主要介紹了Vue3.0之引入Element-plus ui樣式的兩種方法，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-02-02
Vue.js仿Select下拉框效果
這篇文章主要為大家詳細(xì)介紹了Vue.js仿 Select下拉框效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-02-02
vue 里面使用axios 和封裝的示例代碼
本篇文章主要介紹了vue 里面使用axios 和封裝的示例代碼，非常具有實(shí)用價(jià)值，需要的朋友可以參考下
2017-09-09