国产 无码 综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

(vue3)動態(tài)組件

這篇具有很好參考價值的文章主要介紹了(vue3)動態(tài)組件。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方,請大家不吝賜教,您也可以點(diǎn)擊"舉報違法"按鈕提交疑問。

什么是動態(tài)組件 就是:讓多個組件使用同一個掛載點(diǎn),并動態(tài)切換,這就是動態(tài)組件。

在掛載點(diǎn)使用component標(biāo)簽,然后使用v-bind:is=”組件?,通過is 切換 A B 組件

<template>
    <div style="display: flex;">
       <div @click="switchCom(item,index)" 
            :class="[active == index ? 'active':'']" 
            class="tabs" v-for="(item,index) in data" :key="index">
          <div>{{ item.name }}</div>
       </div>
    </div>
    <!-- 內(nèi)置組件 -->
    <component :is="comId"></component>
</template>
<script setup lang='ts'>
import { ref, reactive, shallowRef, markRaw } from 'vue'
import AP from '@/components/expame/AP.vue'
import BP from '@/components/expame/BP.vue'
import CP from '@/components/expame/CP.vue'

const comId = shallowRef(AP) // 切換組件
const active = ref(0)  // 點(diǎn)擊tab動態(tài)樣式
const data = reactive([  
   {
      name:'A組件',
      com:markRaw(AP)
   },
   {
      name:'B組件',
      com:markRaw(BP)
   },
   {
      name:'C組件',
      com:markRaw(CP)
   }
])
// 點(diǎn)擊事件
const switchCom = (item , index) => {
   comId.value = item.com
   active.value = index
}
</script>

使用場景

tab切換?居多

注意事項(xiàng)?

1.在Vue2 的時候is 是通過組件名稱切換的 在Vue3 setup 是通過組件實(shí)例切換的

2.如果你把組件實(shí)例放到Reactive Vue會給你一個警告runtime-core.esm-bundler.js:38 [Vue warn]: Vue received a Component which was made a reactive object. This can lead to unnecessary performance overhead, and should be avoided by marking the component with `markRaw` or using `shallowRef` instead of `ref`.?
Component that was made reactive:?

這是因?yàn)閞eactive 會進(jìn)行proxy 代理 而我們組件代理之后毫無用處 節(jié)省性能開銷 推薦我們使用shallowRef 或者 ?shallowRef 跳過proxy 代理
所以上面要使用shallowRef , shallowRef 包裹組件
文章來源地址http://www.zghlxwxcb.cn/news/detail-644675.html

到了這里,關(guān)于(vue3)動態(tài)組件的文章就介紹完了。如果您還想了解更多內(nèi)容,請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!

本文來自互聯(lián)網(wǎng)用戶投稿,該文觀點(diǎn)僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務(wù),不擁有所有權(quán),不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載,請注明出處: 如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實(shí)不符,請點(diǎn)擊違法舉報進(jìn)行投訴反饋,一經(jīng)查實(shí),立即刪除!

領(lǐng)支付寶紅包贊助服務(wù)器費(fèi)用

相關(guān)文章

  • vue3動態(tài)組件

    vue3動態(tài)組件

    ?1 、 可以通過? shallowRef 把? 可以把組件進(jìn)行包裹 為什么用shallowRef ? ? ?如果傳入基本數(shù)據(jù)類型,那么 shallowRef 與 ref 的作用基本沒有什么區(qū)別,也就是淺層的 ref 的內(nèi)部值將會原樣的存儲和暴露,并不會被深層遞歸地轉(zhuǎn)為響應(yīng)式 當(dāng)我們使用ref? ?會有提醒建議使用? shallowRef ?

    2024年02月12日
    瀏覽(13)
  • vue3動態(tài)加載組件

    當(dāng) is 是字符串,它既可以是 HTML 標(biāo)簽名也可以是組件的注冊名。 或者,is 也可以直接綁定到組件的定義。 內(nèi)置組件都可以傳遞給 is,但是如果想通過名稱傳遞則必須先對其進(jìn)行注冊。 如果將組件本身傳遞給 is 而不是其名稱,則不需要注冊。 vue官方文檔-component內(nèi)置動態(tài)組件

    2024年02月13日
    瀏覽(25)
  • vue3動態(tài)組件組件shallowRef包裹問題

    在vue3做tabs切換功能的時候,如果導(dǎo)入的組件不適用shallowRef包裹會顯示下面的警告: 根據(jù)提示代碼修改如下: 就能解決上面的問題。

    2024年02月22日
    瀏覽(23)
  • VITE+VUE3動態(tài)導(dǎo)入組件

    通常的動態(tài)組件導(dǎo)入方式 ??vue中又是時候我們會使用到動態(tài)組件導(dǎo)入,比如路由組件的動態(tài)導(dǎo)入,一般類似路由組件的動態(tài)導(dǎo)入的方式: ()=import(path); ()=defineAsyncComponent(()=import(path)) vite中使用的錯誤 但是這寫方式進(jìn)行動態(tài)導(dǎo)入組件的時候在vite+vue3項(xiàng)目下都是不行的,開發(fā)

    2024年02月14日
    瀏覽(27)
  • 前端常用 Vue3 項(xiàng)目組件大全

    Vue.js 是一種流行的 JavaScript 前端框架,它簡化了構(gòu)建交互式的用戶界面的過程。Vue3 是 Vue.js 的最新版本,引入了許多新的特性和改進(jìn)。在 Vue3 中,組件是構(gòu)建應(yīng)用程序的核心部分,它們可以重用、組合和嵌套。下面是一些前端開發(fā)中常用的 Vue3 項(xiàng)目組件。 1、Vue Router: Vue

    2024年02月10日
    瀏覽(24)
  • VUE3+vite項(xiàng)目中動態(tài)引入組件和異步組件

    1. 把項(xiàng)目中所有vue文件注冊成異步組件。 2. 獲取組件 在setup函數(shù)獲取組件 3. 參考如下 Glob 導(dǎo)入 Vite 支持使用特殊的 import.meta.glob 函數(shù)從文件系統(tǒng)導(dǎo)入多個模塊: 以上將會被轉(zhuǎn)譯為下面的樣子: 你可以遍歷 modules 對象的 key 值來訪問相應(yīng)的模塊: 匹配到的文件默認(rèn)是懶加載的

    2024年02月10日
    瀏覽(34)
  • 【前端技術(shù)】Vue3 01:初識 Vue.js

    【前端技術(shù)】Vue3 01:初識 Vue.js

    Vue 可以說是非常流行了,至少在國內(nèi)是這樣,他是個輕量級的 JavaScript 框架,非常適合構(gòu)建大型和中小型的 Web 應(yīng)用程序,如果想和前端打交道,應(yīng)該繞不過這個框架吧。 目錄 1?Vue.js 介紹 2??IDE 選擇 2.1 vscode 2.2?WebStorm 2.3?Eclipse 3??創(chuàng)建 Vue 應(yīng)用 3.1 本地腳手架創(chuàng)建 ① 安裝

    2024年02月02日
    瀏覽(26)
  • vue3拖拽布局+動態(tài)組件+自適應(yīng)布局

    1.拖拽布局插件 Vue Grid Layout -? 適用Vue.js的柵格布局系統(tǒng) 可拖動和可調(diào)整大小柵格布局的Vue組件。 https://jbaysolutions.github.io/vue-grid-layout/zh/ //在package.json中dependencies下添加下面插件庫,并執(zhí)行命令npm install ?\\\"vue-grid-layout\\\":?\\\"^3.0.0-beta1\\\", ?2.拖拽頁面代碼 3.圖表子組件代碼

    2024年02月11日
    瀏覽(20)
  • 前端學(xué)習(xí)筆記(14)-Vue3組件傳參

    前端學(xué)習(xí)筆記(14)-Vue3組件傳參

    1.props(父組件傳遞給子組件) 1.1 實(shí)現(xiàn) 如果你沒有使用 script setup,props 必須以 props 選項(xiàng)的方式聲明,props 對象會作為 setup() 函數(shù)的第一個參數(shù)被傳入: 在子組件中: 在父組件中: 一個組件可以有任意多的 props,默認(rèn)情況下,所有 prop 都接受任意類型的值。 這種情況下,我

    2024年01月21日
    瀏覽(32)
  • Vue3前端開發(fā),父組件給子組件傳遞數(shù)據(jù)練習(xí)

    Vue3前端開發(fā),父組件給子組件傳遞數(shù)據(jù)練習(xí)

    Vue3前端開發(fā),父組件給子組件傳遞數(shù)據(jù)練習(xí)!還是借用剛剛的組件模板,來開展父傳子的練習(xí)。 依舊是需要借助官方提供的宏函數(shù)來接收數(shù)據(jù)。defineProps. 這個是父組件里面的內(nèi)容。我們自定義了2個變量,一個是車?yán)遄訂蝺r。一個是純文本。 一個數(shù)字類型,一個文本類型。都

    2024年01月22日
    瀏覽(28)

覺得文章有用就打賞一下文章作者

支付寶掃一掃打賞

博客贊助

微信掃一掃打賞

請作者喝杯咖啡吧~博客贊助

支付寶掃一掃領(lǐng)取紅包,優(yōu)惠每天領(lǐng)

二維碼1

領(lǐng)取紅包

二維碼2

領(lǐng)紅包