Vue3系列8--全局組件,局部組件,遞歸組件

来源:https://www.cnblogs.com/lotusflower/archive/2022/08/07/16551663.html
-Advertisement-
Play Games

1 配置全局組件 當一個組件使用頻率非常高的時候,可以考慮設置其為全局組件,方便其他地方調用。 案例 我這兒封裝一個Card組件想在任何地方去使用: <template> <div class="card"> <div class="card-header"> <div>主標題</div> <div ...


1 配置全局組件

當一個組件使用頻率非常高的時候,可以考慮設置其為全局組件,方便其他地方調用。

 案例------我這兒封裝一個Card組件想在任何地方去使用:

<template>
    <div class="card">
        <div class="card-header">
            <div>主標題</div>
            <div>副標題</div>
        </div>
        <div v-if="content" class="card-content">
            {{ content }}
        </div>
    </div>
</template>
<script setup lang="ts">
type Props = {
    content?: string
}

defineProps<Props>()
</script>

<style scoped lang="less">
@border: #ccc;
.card {
    border: 1px solid;
    &:hover {
        box-shadow: 0 0 20px @border; //放在上面的效果
    }
    &-header {
        display: flex;
        justify-content: space-between;
        padding: 10px;
        border-bottom: 1px solid @border;
    }
    &-content {
        padding: 10px;
    }
}
</style>

使用方法:在main.ts 引入我們的組件跟隨在createApp(App) 後面 切記不能放到mount 後面這是一個鏈式調用用,其次調用 component 第一個參數組件名稱 第二個參數組件實例。

import { createApp } from 'vue'
import App from './App.vue'
import './assets/css/reset/index.less'
import Card from './components/Card/index.vue'
createApp(App).component('Card',Card).mount('#app')

使用方法:直接在其他vue頁面 立即使用即可 無需引入

<template>
 <Card></Card>
</template>

2 配置局部組件

<template>
  <div class="wraps">
    <layout-menu :flag="flag" @on-click="getMenu" @on-toogle="getMenuItem" :data="menuList" class="wraps-left"></layout-menu>
    <div class="wraps-right">
      <layout-header> </layout-header>
      <layout-main class="wraps-right-main"></layout-main>
    </div>
  </div>
</template>
 
<script setup lang="ts">
import { reactive,ref } from "vue";
import layoutHeader from "./Header.vue";
import layoutMenu from "./Menu.vue";
import layoutMain from "./Content.vue";

就是在一個組件內(A) 通過import 去引入別的組件(B) 稱之為局部組件,應為B組件只能在A組件內使用 所以是局部組件,如果C組件想用B組件 就需要C組件也手動import 引入 B 組件。

3 配置遞歸組件

原理跟我們寫js遞歸是一樣的 自己調用自己 通過一個條件來結束遞歸 否則導致記憶體泄漏

案例遞歸樹:在父組件配置數據結構 數組對象格式 傳給子組件

<template>
  <div>
    <Tree :data="data"></Tree>
  </div>
</template>

<script>
import Tree from '../../components/Tree/index.vue'
type TreeList = {
  name: string;
  icon?: string;
  children?: TreeList[] | [];
};
const data = reactive<TreeList[]>([
  {
    name: "no.1",
    children: [
      {
        name: "no.1-1",
        children: [
          {
            name: "no.1-1-1",
          },
        ],
      },
    ],
  },
  {
    name: "no.2",
    children: [
      {
        name: "no.2-1",
      },
    ],
  },
  {
    name: "no.3",
  },
]);
</script>

子組件接收值 第一個script

type TreeList = {
  name: string;
  icon?: string;
  children?: TreeList[] | [];
};
 
type Props<T> = {
  data?: T[] | [];
};
 
defineProps<Props<TreeList>>();
 
const clickItem = (item: TreeList) => {
  console.log(item)
}

子組件增加一個script 定義組件名稱為了 遞歸用 :

<script lang="ts">
export default {
  name:"TreeItem"
}
</script>

TreeItem 其實就是當前組件 通過import 把自身又引入了一遍 如果他沒有children 了就結束:

<template>
    <div style="margin-left: 10px;">
        <!-- {{data}} -->
        <div :key="index" v-for="(item, index) in data">{{ item.name }}
            <TreeItem v-if="item?.children?.length" :data="item.children"></TreeItem>
        </div>
    </div>
</template>

<script setup lang="ts">
import TreeItem from './index.vue'
type TreeList = {
    name: string,
    icon?: string,
    children?: TreeList[] | []
}

type Props = {
    data?: TreeList[] 
}

defineProps<Props>()

</script>

4 動態組件

什麼是動態組件 就是:讓多個組件使用同一個掛載點,並動態切換,這就是動態組件。在掛載點使用component標簽,然後使用v-bind:is=”組件”

用法如下:引入組件

import A from './A.vue'
import B from './B.vue'
import C from './C.vue'

 

<component :is="current.comName"></component>

通過is 切換 A B 組件,使用場景,tab切換 居多

註意事項

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

2.如果你把組件實例放到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:這是因為reactive 會進行proxy 代理 而我們組件代理之後毫無用處 節省性能開銷 推薦我們使用shallowRef 或者 markRaw 跳過proxy 代理.

type Tabs = {
    name: string,
    comName: any
}

const data = reactive<Tabs[]>([
    {
        name: "我是組件A",
        comName: markRaw(A)
    },
    {
        name: "我是組件B",
        comName: markRaw(B)
    },
    {
        name: "我是組件C",
        comName: markRaw(C)
    },
])

type Com = Pick<Tabs, "comName">

let current = reactive<Com>({
    comName: data[0].comName
})


const switchTabs = (item: Tabs) => {
    current.comName = item.comName
}

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 前幾天有個需求需要基於分類數據向上統計總數,一開始第一個想法是通過程式來計算,後再思考能不能通過SQL腳本直接來計算 基礎數據 | Id | ParentId | Category | Num | | | | | | | 1 | 0 | 分類1 | 0 | | 2 | 1 | 分類1-1 | 10 ...
  • 1.ETCD概述 1.1 ETCD概述 etcd是一個高可用的分散式的鍵值對存儲系統,常用做配置共用和服務發現。由CoreOS公司發起的一個開源項目,受到ZooKeeper與doozer啟發而催生的項目,名稱etcd源自兩個想法,即Linux的**/etc文件夾和d分散式系統。/etc**文件夾是用 ...
  • 通過簡單的KV資料庫理解Redis 分為訪問模塊,操作模塊,索引模塊,存儲模塊 底層數據結構 除了String類型,其他類型都是一個鍵對應一個集合,鍵值對的存儲結構採用哈希表 哈希表由多個哈希桶組成,桶中存儲entry元素,存儲key和value的地址 但是當hash衝突元素過多會導致查詢效率變慢, ...
  • MYSQL的Java操作器——JDBC 在學習了Mysql之後,我們就要把Mysql和我們之前所學習的Java所結合起來 而JDBC就是這樣一種工具:幫助我們使用Java語言來操作Mysql資料庫 JDBC簡介 首先我們先來瞭解一下JDBC JDBC概念: JDBC是使用Java語言操作關係資料庫的 ...
  • 面試官:我看你的簡歷上寫著精通MySQL,問你個簡單的問題,MySQL聯合索引有什麼特性? 我:MySQL聯合索引遵循最左首碼匹配原則,即最左優先,查詢的時候會優先匹配最左邊的索引。 例如當我們在(a,b,c)三個欄位上創建聯合索引時,實際上是創建了三個索引,分別是(a)、(a,b)、(a,b,c)... ...
  • 有趣的特性:CHECK約束 功能說明 在MySQL 8.0.16以前, CREATE TABLE允許從語法層面輸入下列CHECK約束,但實際沒有效果: CHECK (expr) 在 MySQL 8.0.16,CREATE TABLE添加了針對所有存儲引擎的表和列的CHECK約束的核心特性。CREAT ...
  • 在B/S系統開發中,前後端分離開發設計已成為一種標準,而VUE作為前端三大主流框架之一,越來越受到大家的青睞,Antdv是Antd在Vue中的實現。本系列文章主要通過Antdv和Asp.net WebApi開發學生信息管理系統,簡述前後端分離開發的主要相關內容,僅供學習分享使用,如有不足之處,還請指... ...
  • vue3-admin-template 項目地址:vue3-admin-template 能拿來直接開發項目,不需要考慮格式化配置、打包編譯優化等等,難道它不香嗎?~~ 此項目是集成vue3 + vite + Element-Plus + Pinia + vue-router的後臺管理系統的模板工程 ...
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...