vue2升級vue3：Vue2/3插槽——vue3的jsx組件插槽slot怎麼處理

来源:https://www.cnblogs.com/zhoulujun/archive/2022/06/21/16398130.html
-Advertisement-
Play Games

這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 一、vue腳手架 1.簡介 Vue CLI 是一個基於 Vue.js 進行快速開發的完整系統。 2.命令行操作步驟 npm install -g @vue/cli 安裝3.x版本的vue腳手架 vue -V 測試是否安裝成功 vue cr ...


插槽的作用

讓用戶可以拓展組件，去更好地復用組件和對其做定製化處理。

Vue 實現了一套內容分發的 API，將<slot>元素作為承載分發內容的出口，這是vue文檔上的說明。具體來說，slot就是可以讓你在組件內添加內容的‘空間’。

  1. 父組件在引用子組件時希望向子組價傳遞模板內容<p>測試一下吧內容寫在這裡了能否顯示</p> 

  2. 子組件讓父組件傳過來的模板內容在所在的位置顯示 

  3. 子組件中的<slot>就是一個槽，可以接收父組件傳過來的模板內容，<slot> 元素自身將被替換 

  4. <myslot></myslot>組件沒有包含一個 <slot> 元素，則該組件起始標簽和結束標簽之間的任何內容都會被拋棄

 

插槽的分類

vue 在 2.6 版本中，對插槽使用 v-slot 新語法，取代了舊語法的 slot 和 slot-scope，並且之後的 Vue 3.0 也會使用新語法，這並不是僅寫法的不同，還包括了性能的提升

插槽分為普通插槽和作用域插槽，普通插槽為父組件傳遞數據/元素/組件給子組件，而子組件定義 <slot> 接收，當插槽有多個的時候，需要使用具名插槽 <slot name="xxx">，用於將數據綁定在指定的插槽

普通插槽

//  父組件
<template v-slot>
  <p>new Nian糕</p>
</template>
// 舊語法 只需一行：<p slot>old Nian糕</p>

// 子組件
<slot />

具名插槽

// 父組件
<template v-slot:item>
  <p>new Nian糕</p>
</template>
// 舊語法：<p slot="item">old Nian糕</p>

// 子組件
<slot name="item" />

作用域插槽為子組件 <slot> 綁定屬性，傳遞數據給父組件，父組件通過 v-slot:xxx="props" 接收子組件傳遞的屬性

作用域插槽 舊語法

//  父組件
<p slot="love" slot-scope="props">愛old {{ props.name }}真是太好了</p>

// 子組件
<slot name="love" v-bind="{ name }" />

export default {
  data() {
    return {
      name: "Nian糕"
    }
  }
}

作用域插槽 新語法

//  父組件
<template v-slot:love="props">
  <p>愛new {{ props.name }}真是太好了</p>
</template>

// 子組件
<slot name="love" v-bind="{ name }" />

export default {
  data() {
    return {
      name: "Nian糕"
    }
  }
}

 

案例2

//子組件 ： (假設名為：ebutton)
<template>
    <div class= 'button'>
        <button> test</button>
        <slot name= 'one' :value1='child1'> 這就是預設值1</slot>    //綁定child1的數據
        <slot :value2='child2'> 這就是預設值2 </slot>  //綁定child2的數據，這裡我沒有命名slot
    </div>
</template>

<script>
new Vue({
  el:'.button',
  data:{
    child1:'數據1',
    child2:'數據2'
  }
})
</script>

//父組件：（引用子組件 ebutton）
<template>
    <div class= 'app'>
        <ebutton>
            <template v-slot:one = 'slotone'>
                {{ slotone.value1 }}    // 通過v-slot的語法 將子組件的value1值賦值給slotone
            </template>
            <template v-slot:default = 'slottwo'>
                {{ slottwo.value2 }}  // 同上，由於子組件沒有給slot命名，預設值就為default
            </template>
        </ebutton>
    </div>
</template>

 

Vue3.0 slot簡寫

<!-- 父組件中使用 -->
 <template v-slot:content="scoped">
   <div v-for="item in scoped.data">{{item}}</div>
</template>

<!-- 也可以簡寫成： -->
<template #content="{data}">
    <div v-for="item in data">{{item}}</div>
</template>

 

Vue3.0在JSX/TSX下如何使用插槽(slot)

先看看官方： https://github.com/vuejs/jsx-next/blob/dev/packages/babel-plugin-jsx/README-zh_CN.md#插槽

在 jsx 中，應該使用 v-slots 代替 v-slot

const A = (props, { slots }) => (
  <div>
    <h1>{ slots.default ? slots.default() : 'foo' }</h1>
    <h2>{ slots.bar?.() }</h2>
  </div>
);

const App = {
  setup() {
    const slots = {
      bar: () => <span>B</span>,
    };
    return () => (
      <A v-slots={slots}>
        <div>A</div>
      </A>
    );
  },
};

// or

const App = {
  setup() {
    const slots = {
      default: () => <div>A</div>,
      bar: () => <span>B</span>,
    };
    return () => <A v-slots={slots} />;
  },
};

// or
const App = {
  setup() {
    return () => (
      <>
        <A>
          {{
            default: () => <div>A</div>,
            bar: () => <span>B</span>,
          }}
        </A>
        <B>{() => "foo"}</B>
      </>
    );
  },
};

上面代碼來源：Vue3.0在JSX/TSX下如何使用插槽(slot) https://www.cnblogs.com/pinkchampagne/p/14083724.html

關於jsx的，可以瞅瞅：vue3下jsx教學，保證業務上手無問題！https://juejin.cn/post/6911883529098002446

vue3 template與jsx寫法對比

ue template中的slot插槽如何在JSX中實現？和template對比，更加清晰

template寫法

子組件

 

<template>
    <div>
        <span>I'm Child</span>
        <slot></slot>
        <slot name="header"></slot>
    </div>
</template>

<script>
export default {
    name: "Test"
}
</script>

父組件

<template>
    <TestComponent>
        <template #default>
            <span>這是預設插槽</span>
        </template>
        <template #header>
            <span>這是header插槽</span>
        </template>
    </TestComponent>
</template>

<script>
import TestComponent from './TestComponent'
export default {
    name: "Parent",
    components: {
        TestComponent
    }
}
</script>

JSX的寫法:

子組件

 

import { defineComponent } from "@vue/runtime-core";

export default defineComponent({
    name: "Test",
    render() {
        return (
            <>
                <span>I'm Child</span>
                { this.$slots.default?.() }
                { this.$slots.header?.() }
            </>
        )
    }
})
作用域插槽
import { defineComponent } from "@vue/runtime-core";

export default defineComponent({
    name: "Test",
    setup() {
        return {
            value: {
                name: 'xzw'
            }
        }
    },
    render() {
        return (
            <>
                <span>I'm Child</span>
                { this.$slots.content?.(this.value) }
            </>
        )
    }
})

父組件

 

import { defineComponent } from 'vue'
import TestComponent from './TestComponent'

export default defineComponent({
    name: "Test",
    components: {
        TestComponent
    },
    render() {
        return (
            <TestComponent v-slots={{
                default: () => (
                    <div>這是預設插槽</div>
                ),
                header: () => (
                    <div>這是header插槽</div>
                )
            }}>
            </TestComponent>
        )
    }
})
作用域插槽
import { defineComponent } from 'vue'
import TestComponent from './TestComponent'

export default defineComponent({
    name: "Test",
    components: {
        TestComponent
    },
    render() {
        return (
            <TestComponent v-slots={{
                content: scope => ( <div>{scope.name}</div>)
            }}>
            </TestComponent>
        )
    }
})

參考文章：

Vue3中的 JSX 以及 jsx插槽的使用 https://juejin.cn/post/6983130251702304781

Vue3 中插槽(slot)的用法 https://www.cnblogs.com/recode-hyh/p/14544808.html

vue3 學習 之 vue3使用 https://www.jianshu.com/p/91328e6934c9

【vue3】 使用JSX實現普通、具名和作用域插槽 https://blog.csdn.net/qq_24719349/article/details/116724681

 

 


轉載本站文章《vue2升級vue3：Vue2/3插槽——vue3的jsx組件插槽slot怎麼處理》,
請註明出處：https://www.zhoulujun.cn/html/webfront/ECMAScript/vue3/8683.html


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

-Advertisement-
Play Games
更多相關文章
  • WSL 2 的安裝過程（以及介紹）
    鏡像下載、功能變數名稱解析、時間同步請點擊 阿裡雲開源鏡像站 什麼是WSL2 WSL全稱為Windows Subsystem for Linux，官網譯為：適用於 Linux 的 Windows 子系統 (WSL)。 官方文檔直達：適用於 Linux 的 Windows 子系統文檔 | Microsoft ...
  • Linux系統常見的壓縮命令
    1、Linux系統常見的壓縮命令 *.z compress程式壓縮文件（不流行了）*.gz gzip程式壓縮的文件*.bz2 bzip2程式壓縮的文件*.tar tar程式打包的數據，並沒有被壓縮過*.tar.gz tar程式打包的文件，其中經過gzip的壓縮*.tar.bz2 tar程式打包的文件 ...
  • VMware 虛擬機圖文安裝和配置 Ubuntu Server 22.04
    鏡像下載、功能變數名稱解析、時間同步請點擊 阿裡雲開源鏡像站 **前言：**本文將以 Ubuntu Server 22.04 LTS 為例，說明在 VMware 虛擬機中的安裝和配置 Linux 操作系統的步驟。 一、VMWare 安裝配置 1、VMware 下載地址：VMware Workstation ...
  • Linux 軟體管理
    Linux管理軟體的三種方法： 包管理 使用倉庫管理 編譯安裝 軟體相關概念： ABI: ABI：Application Binary Interface。應用程式的二進位介面。windows和Linux的二進位格式不一樣（ABI標準不同） Windows與Linux不相容 ELF (Executa ...
  • MySQL 8.0 新特性梳理彙總
    雲原生時代需要什麼樣的資料庫？如何構建資料庫服務？騰訊雲資料庫技術負責人程彬認為，雲資料庫未來趨勢會從以托管為核心升級到以極致效率為核心，助力業務降本增效。從資料庫管理和應用角度來看，雲廠商、資源、客戶三角關係背後包含了三個維度的效率：系統效率、運營效率、業務效率，當這些效率都做到極致，成本會大幅下 ...
  • 新手使用APICloud可視化開發搭建商城主頁
    前言 ​ 所謂的 APP 和 H5 打通，是指 H5 集成 JavaScript 數據採集 SDK 後，H5 觸發的事件不直接同步給伺服器，而是先發給 APP 端的數據採集 SDK，經過 APP 端數據採集 SDK 二次加工處理後存入本地緩存再進行同步。 一、App 與 H5 打通原因 1.1 數據 ...
  • HMS Core機器學習服務身份證識別功能，實現信息高效錄入
    在各類App都要進行實名制的當下，進行身份認證自然不可避免。平時購買火車票、飛機票，住酒店、打游戲等都需要身份認證，如果每次都要輸入那18位的身份證號十分麻煩，手一抖就會出錯。因此，使用華為機器服務身份證識別功能掃描身份證，錄入身份信息就相當方便了。 1. 業務簡介 HMS Core機器學習服務身份 ...
  • 20220621學習HTML筆記
    文本格式化標簽 語義 標簽 加粗 <strong> <b> 傾斜 <em> <i> 刪除線 <del> <s> 下劃線 <ins> <u> 盒子標簽 佈局 <div> 獨占一行，大盒子 <span> 一行可以放多個，小盒子 圖像標簽 <img 屬性=... /> 單標簽 | 屬性 | 屬性值 | 說 ...
一周排行
    -Advertisement-
    Play Games
  • GoF之工廠模式
    GoF之工廠模式 @目錄GoF之工廠模式每博一文案1. 簡單說明“23種設計模式”1.2 介紹工廠模式的三種形態1.3 簡單工廠模式（靜態工廠模式）1.3.1 簡單工廠模式的優缺點:1.4 工廠方法模式1.4.1 工廠方法模式的優缺點:1.5 抽象工廠模式1.6 抽象工廠模式的優缺點：2. 總結:3 ...
  • dotnet C# 簡單的追加文件夾到 ZipArchive 壓縮文件的方法
    新改進提供的Taurus Rpc 功能，可以簡化微服務間的調用，同時可以不用再手動輸出模塊名稱，或調用路徑，包括負載均衡，這一切，由框架實現並提供了。新的Taurus Rpc 功能，將使得服務間的調用，更加輕鬆、簡約、高效。 ...
  • Elasticsearch 系列（六）- ES數據同步和ES集群
    本章將和大家分享ES的數據同步方案和ES集群相關知識。廢話不多說，下麵我們直接進入主題。 一、ES數據同步 1、數據同步問題 Elasticsearch中的酒店數據來自於mysql資料庫，因此mysql數據發生改變時，Elasticsearch也必須跟著改變，這個就是Elasticsearch與my ...
  • 自動化測試數據生成：Asp.Net Core單元測試利器AutoFixture詳解
    引言 在我們之前的文章中介紹過使用Bogus生成模擬測試數據，今天來講解一下功能更加強大自動生成測試數據的工具的庫"AutoFixture"。 什麼是AutoFixture? AutoFixture 是一個針對 .NET 的開源庫，旨在最大程度地減少單元測試中的“安排（Arrange）”階段，以提高 ...
  • .NET Emit 入門教程：第七部分：實戰項目1：將 DbDataReader 轉實體
    經過前面幾個部分學習，相信學過的同學已經能夠掌握 .NET Emit 這種中間語言，並能使得它來編寫一些應用，以提高程式的性能。隨著 IL 指令篇的結束，本系列也已經接近尾聲，在這接近結束的最後，會提供幾個可供直接使用的示例，以供大伙分析或使用在項目中。 ...
  • Windows下綁定線程到指定的CPU核心
    當從不同來源導入Excel數據時，可能存在重覆的記錄。為了確保數據的準確性，通常需要刪除這些重覆的行。手動查找並刪除可能會非常耗費時間，而通過編程腳本則可以實現在短時間內處理大量數據。本文將提供一個使用C# 快速查找並刪除Excel重覆項的免費解決方案。 以下是實現步驟： 1. 首先安裝免費.NET ...
  • mORMot 1.18 第07章 簡單的讀寫操作
    C++ 異常處理 C++ 異常處理機制允許程式在運行時處理錯誤或意外情況。它提供了捕獲和處理錯誤的一種結構化方式，使程式更加健壯和可靠。 異常處理的基本概念： 異常: 程式在運行時發生的錯誤或意外情況。 拋出異常: 使用 throw 關鍵字將異常傳遞給調用堆棧。 捕獲異常: 使用 try-catch ...
  • mORMot 1.18 第06章 概念
    優秀且經驗豐富的Java開發人員的特征之一是對API的廣泛瞭解，包括JDK和第三方庫。 我花了很多時間來學習API，尤其是在閱讀了Effective Java 3rd Edition之後 ，Joshua Bloch建議在Java 3rd Edition中使用現有的API進行開發，而不是為常見的東西編 ...
  • php 開發規範
    框架 · 使用laravel框架，原因：tp的框架路由和orm沒有laravel好用 · 使用強制路由，方便介面多時，分多版本，分文件夾等操作 介面 · 介面開發註意欄位類型，欄位是int，查詢成功失敗都要返回int（對接java等強類型語言方便） · 查詢介面用GET、其他用POST 代碼 · 所 ...
  • 2024 年 4 月 28 日 周日 晴 熱（1253 字）
    正文 下午找企業的人去鎮上做貸後。 車上聽同事跟那個司機對罵，火星子都快出來了。司機跟那同事更熟一些，連我在內一共就三個人，同事那一手指桑罵槐給我都聽愣了。司機也是老社會人了，馬上聽出來了，為那個無辜的企業經辦人辯護，實際上是為自己辯護。 “這個事情你不能怪企業。”“但他們總不能讓銀行的人全權負責， ...
所有分類