Vue Slot用法

liangdas 發(fā)布于2019-08-21 10:51 / 2259人閱讀

摘要：示例這是命名的節(jié)點(diǎn)該節(jié)點(diǎn)在邏輯代碼中，可以使用來(lái)獲取命名的。該節(jié)點(diǎn)在文件中，可以使用來(lái)承接命名的。

Vue在講組件時(shí)，建議最好不要在父作用域中傳值給子組件，不知道為什么用slot；

slot背景

為什么要用slot？

個(gè)人理解：

為了保證組件內(nèi)容的靈活性，組件的內(nèi)容由其所在的上下文環(huán)境確定；

將組件必要的內(nèi)部層級(jí)透明地展現(xiàn)在組件所在的上下文環(huán)境中；

slot分類默認(rèn)的slot

默認(rèn)的slot是指那些在調(diào)用組件時(shí),沒有指定slot屬性的嵌套子節(jié)點(diǎn)。

示例：

  
    這是默認(rèn)的slot節(jié)點(diǎn)
    這是命名的slot節(jié)點(diǎn)

該節(jié)點(diǎn)在DefinedComponent.vue邏輯代碼中，可以使用this.$slots.default來(lái)獲取默認(rèn)的Array([VNode])：數(shù)組第一項(xiàng)即是封裝

這是默認(rèn)的slot節(jié)點(diǎn)

的VueNode對(duì)象。

該節(jié)點(diǎn)在DefinedComponent.vue文件中，可以使用來(lái)承接默認(rèn)的slot：

//DefinedComponent.vue

命名的slot

命名的slot是指那些在調(diào)用組件時(shí)，指定slot屬性的嵌套子節(jié)點(diǎn)。

示例：

  
    這是命名的slot節(jié)點(diǎn)

該節(jié)點(diǎn)在DefinedComponent.vue邏輯代碼中，可以使用this.$slots.definedSlot來(lái)獲取命名的Array([VNode])。

該節(jié)點(diǎn)在DefinedComponent.vue文件中，可以使用來(lái)承接命名的slot。

//DefinedComponent.vue

slot的應(yīng)用 缺省的嵌套子節(jié)點(diǎn)

組件內(nèi)需要根據(jù)所在上下文提供嵌套子節(jié)點(diǎn)，且需要設(shè)置缺省值的時(shí)候，可以查看以下示例：

view/index.vue

components/Navigation.vue

指定位置的slot

按照預(yù)定的坑位填坑。

view/index.html

components/Null.vue

云服務(wù)器 GPU云服務(wù)器 slot js slot linux pci slot Vue_Vue

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

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

相關(guān)文章

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

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

selfimpr 2019-08-26 13:33 評(píng)論0 收藏0
vue 2.6 中 slot 的新用法

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

genedna 2019-08-23 18:34 評(píng)論0 收藏0
細(xì)談 vue - slot 篇

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

kaka 2019-05-23 16:26 評(píng)論0 收藏0
Vue.js-Render函數(shù)

摘要：函數(shù)通過(guò)參數(shù)來(lái)創(chuàng)建虛擬，結(jié)構(gòu)精簡(jiǎn)。其中，訪問的用法，使用場(chǎng)景集中在函數(shù)。使用代替模板功能在函數(shù)中，不再需要內(nèi)置的指令，比如。方法時(shí)快速改變數(shù)組結(jié)構(gòu)，返回一個(gè)新數(shù)組。學(xué)習(xí)筆記：Render函數(shù) Render函數(shù) Vue2與Vue1最大的區(qū)別就在于Vue2使用了虛擬DOM來(lái)更新DOM節(jié)點(diǎn)，提升渲染性能。 Vue2與Vue1最大的區(qū)別就在于Vue2使用了虛擬DOM來(lái)更新DOM節(jié)點(diǎn)，提升...

ccj659 2019-08-23 16:03 評(píng)論0 收藏0
Vue.js-組件詳解

摘要：事件總線事件總線首先創(chuàng)建了一個(gè)名為的空的實(shí)例然后全局定義了組件最后創(chuàng)建了實(shí)例。在父組件模板中，子組件標(biāo)簽上使用指定一個(gè)名稱，并在父組件內(nèi)通過(guò)來(lái)訪問指定名稱的子組件。學(xué)習(xí)筆記：組件詳解組件詳解組件與復(fù)用 Vue組件需要注冊(cè)后才可以使用。注冊(cè)有全局注冊(cè)和局部注冊(cè)兩種方式。全局注冊(cè) Vue.component(my-component, {}); 要在父實(shí)例中使用這個(gè)組件，必須要...

jeffrey_up 2019-08-23 16:02 評(píng)論0 收藏0