快捷導(dǎo)航

vue動(dòng)態(tài)組件之:is在組件中的使用場(chǎng)景

更新時(shí)間：2023年07月07日 10:54:01 作者：seekHelp

這篇文章主要介紹了vue動(dòng)態(tài)組件之:is在組件中的使用場(chǎng)景,本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

vue動(dòng)態(tài)組件之:is在組件中的使用

使用場(chǎng)景：

有些場(chǎng)景會(huì)需要在兩個(gè)組件間來(lái)回切換，比如 Tab 界面：
我們可以通過(guò) Vue 的<component> 元素和特殊的 is attribute 實(shí)現(xiàn)的：如

<!-- currentTab 改變時(shí)組件也改變 -->
<component :is="currentTab"></component>

在上面的例子中，被傳給:is的值可以是以下幾種：

被注冊(cè)的組件名
導(dǎo)入的組件對(duì)象
你也可以使用 isattribute 來(lái)創(chuàng)建一般的 HTML 元素。

當(dāng)使用 <component :is="...">來(lái)在多個(gè)組件間作切換時(shí)，被切換掉的組件會(huì)被卸載。我們可以通過(guò) <KeepAlive> 組件強(qiáng)制被切換掉的組件仍然保持“存活”的狀態(tài)。

vue3中的:is 動(dòng)態(tài)組件

1、注意事項(xiàng)

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

2、如果直接把組件實(shí)例放到reactive中代理，vue會(huì)發(fā)出警告。告知我們可以通過(guò)shallowRef 或者 markRaw 跳過(guò)proxy 代理。因?yàn)榻M件實(shí)例進(jìn)行響應(yīng)式代理毫無(wú)意義，且浪費(fèi)性能

在這里插入圖片描述

2、:is 動(dòng)態(tài)組件使用

子組件通過(guò)defineProps接受傳參

<template>
  <div class="content">
    <div class="tabs" v-for="item in tabArr" :key="item.name" @click="tabChange(item.comName)">
      {{ item.name }}
    </div>
  </div>
  <component :is="currentCom"></component>
</template>
<script setup lang="ts">
  import { ref, reactive, markRaw } from 'vue'
  import A from './A.vue'
  import B from './B.vue'
  import C from './C.vue'
  type Tab = {
    name: string,
    comName: any
  }
  // 從復(fù)雜數(shù)據(jù)類型中取出自己想要的幾個(gè)屬性
  type Com = Pick<Tab, 'comName'>
  const tabArr = reactive<Tab[]>([
    {
      name: 'A組件',
      comName: markRaw(A)
    },
    {
      name: 'B組件',
      comName: markRaw(B)
    },
    {
      name: 'C組件',
      comName: markRaw(C)
    },
  ])
  const currentCom = ref<Com>(tabArr[0].comName)
  const tabChange = (item: Com) => {
    currentCom.value = item
  }
</script>
<style>
  .content {
    display: flex;
    padding: 20px;
    height: 40px;
    width: 100vw;
    background: #f1f1f1;
  }
  .tabs {
    width: 100px;
    height: 40px;
    background: #ffffff;
    margin-right: 5px;
    border: 1px solid #000;
  }
</style>

到此這篇關(guān)于vue - 動(dòng)態(tài)組件(:is在組件中的使用)的文章就介紹到這了,更多相關(guān)vue動(dòng)態(tài)組件:is內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: