成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

vue 2.6 插槽更新 v-slot 用法總結(jié)

selfimpr / 1925人閱讀

摘要：在中，我們?yōu)榫呙宀酆妥饔糜虿宀垡肓艘粋€(gè)新的統(tǒng)一的語法即指令。它取代了和這兩個(gè)目前已被廢棄但未被移除且仍在文檔中的特性。新語法的由來可查閱。

在 2.6.0 中，我們?yōu)榫呙宀酆妥饔糜虿宀垡肓艘粋€(gè)新的統(tǒng)一的語法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 這兩個(gè)目前已被廢棄但未被移除且仍在文檔中的特性。新語法的由來可查閱 RFC。

引vue官方文檔
之前做項(xiàng)目時(shí),對(duì)插槽理解太少了,這兩天學(xué)習(xí)時(shí),才發(fā)現(xiàn)插槽更新用v-slot了,自己做了些簡單總結(jié),與大家分享一下~

插槽

我的理解就是
父頁面在組件標(biāo)簽內(nèi)插入任意內(nèi)容,子組件內(nèi)插糟slot控制擺放位置
(匿名插槽,具名插槽)

插槽分類

插槽一共就三大類
1.匿名插槽(也叫默認(rèn)插槽): 沒有命名,有且只有一個(gè)
2.具名插槽: 相對(duì)匿名插槽組件slot標(biāo)簽帶name命名的
3.作用域插槽: 子組件內(nèi)數(shù)據(jù)可以被父頁面拿到(解決了數(shù)據(jù)只能從父頁面?zhèn)鬟f給子組件)

匿名插槽(也叫默認(rèn)插槽default)

用法:我的理解,匿名插糟只需要一個(gè).(就是這些,不太復(fù)雜)
父頁面:

  
        
    
//v-slot:default寫上感覺和具名寫法比較統(tǒng)一,容易理解,也可以不用寫

子組件 todoList.vue

我是默認(rèn)值
##顯示##
// 任意內(nèi)容
// 我是匿名插槽
具名插槽(name)

用法:我的理解,和匿名插槽比較,就是必須起名todo對(duì)應(yīng),可以有多個(gè)具名插槽.(沒了~)
父頁面

  
        
  
// todo
data() {
     return {
       dynamicSlotName:"todo"  
     }

 },

子組件

我是默認(rèn)值
##顯示##
// 任意內(nèi)容
// 我是匿名插槽

對(duì) v-slot:todo 做操作:

動(dòng)態(tài)命名 
v-slot:{dynamicSlotName}//替換標(biāo)簽上 v-slot:todo
具名插槽縮寫(匿名插槽用法)(可以后看) 
#todo 替換標(biāo)簽上 v-slot:todo

匿名如果想用必須加上default

#default 替換標(biāo)簽上 v-slot:todo
父級(jí)模板里的所有內(nèi)容都是在父級(jí)作用域中編譯的；子模板里的所有內(nèi)容都是在子作用域中編譯的。
作用域插槽

1.重點(diǎn)是slotProps接取子組件里:user="user" :test="test"類似屬性的數(shù)據(jù)
父頁面


   
 
//slotProps 可以隨意命名
//slotProps 接取的是子組件標(biāo)簽slot上屬性數(shù)據(jù)的集合所有v-bind:user="user"

子組件

 
        {{ user.lastName }}
   
data() {
        return {
            user:{
                lastName:"Zhang",
                firstName:"yue"
            },
            test:[1,2,3,4]
        }
    },
// {{ user.lastName }}是默認(rèn)數(shù)據(jù)   v-slot:todo 當(dāng)父頁面沒有(="slotProps")
// 時(shí)顯示 Zhang


## 顯示 ##
// yue
解構(gòu)插槽Prop

父頁面 (子組件不變 顯示一樣)

// 相當(dāng)于
function (slotProps) {
  // 插槽內(nèi)容
}
(slotProps)=>參數(shù)可以用slot標(biāo)簽上現(xiàn)有的值({user,test})替換

   
 
## 顯示 ##
## // yue

參數(shù)值替換名字(可以后看)


   
 

//?v-slot:[dynamicSlotName]="{user:person,test}
## 顯示 ##
## // yue

獨(dú)占默認(rèn)插槽縮寫(可以后看)
感覺沒什么機(jī)會(huì)用,限制條件太多

總結(jié)

在用上v-slot之后 只需要考慮好
1.是否需要命名(匿名插槽,具名插槽)
2.父頁面是否需要取存在子頁面的數(shù)據(jù)(作用域插槽)

todo-list實(shí)例

可以試一下,便于理解~
父頁面

子組件

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/109034.html

相關(guān)文章

  • vue 2.6 中 slot 的新用法

    摘要：最近發(fā)布不久的，使用插槽的語法變得更加簡潔。插槽可用包裹外部的標(biāo)簽或者組件，并允許其他或組件放在具名插槽對(duì)應(yīng)名稱的插槽上。在部分中，監(jiān)聽的變化，當(dāng)發(fā)生變化時(shí)，清除狀態(tài)，然后調(diào)用并，當(dāng)成功完成或失敗時(shí)更新狀態(tài)。 為了保證的可讀性，本文采用意譯而非直譯。 最近發(fā)布不久的Vue 2.6，使用插槽的語法變得更加簡潔。 對(duì)插槽的這種改變讓我對(duì)發(fā)現(xiàn)插槽的潛在功能感興趣，以便為我們基于Vue的項(xiàng)目提...

    genedna 評(píng)論0 收藏0

  • vue 插槽，`slot`和 `slot-scope`已被廢棄

    摘要：它取代了和這兩個(gè)目前已被廢棄但未被移除且仍在文檔中的特性。例外情況當(dāng)被提供的內(nèi)容只有默認(rèn)插槽時(shí)，組件的標(biāo)簽才可以被當(dāng)作插槽的模板來使用。如下，讓后備內(nèi)容默認(rèn)內(nèi)容替換正常情況下的綁定在元素上的特性被稱為插槽。 最近忙著寫一些組件，關(guān)于插槽這一塊自己還是用著 slot 和 slot-scope，然后看了一下文檔的更新，于是又重新把插槽學(xué)習(xí)了一篇，下面一段是文檔中的說明: 在 2.6.0 中...

    myshell 評(píng)論0 收藏0

  • vue 插槽，`slot`和 `slot-scope`已被廢棄

    摘要：它取代了和這兩個(gè)目前已被廢棄但未被移除且仍在文檔中的特性。例外情況當(dāng)被提供的內(nèi)容只有默認(rèn)插槽時(shí)，組件的標(biāo)簽才可以被當(dāng)作插槽的模板來使用。如下，讓后備內(nèi)容默認(rèn)內(nèi)容替換正常情況下的綁定在元素上的特性被稱為插槽。 最近忙著寫一些組件，關(guān)于插槽這一塊自己還是用著 slot 和 slot-scope，然后看了一下文檔的更新，于是又重新把插槽學(xué)習(xí)了一篇，下面一段是文檔中的說明: 在 2.6.0 中...

    thursday 評(píng)論0 收藏0

  • 細(xì)談 vue - slot 篇

    摘要：結(jié)合我們的例子，子組件則會(huì)生成以下代碼到目前為止，對(duì)于普通插槽和作用域插槽已經(jīng)談的差不多了。下面我們將仔細(xì)談?wù)勥@塊的內(nèi)容。在看具體實(shí)現(xiàn)邏輯前，我們先通過一個(gè)例子來先了解下其基本用法然后進(jìn)行使用頁面展示效果如下看著好。本篇文章是細(xì)談 vue 系列第二篇了，上篇我們已經(jīng)細(xì)談了 vue 的核心之一 vdom，傳送門 今天我們將分析我們經(jīng)常使用的 vue 功能 slot 是如何設(shè)計(jì)和實(shí)現(xiàn)的，本文將圍...

    kaka 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<