快捷導(dǎo)航

Vue匿名插槽與作用域插槽的合并和覆蓋行為

更新時(shí)間：2019年04月22日 10:12:49 作者：xianshenglu

這篇文章主要介紹了Vue基礎(chǔ)-匿名插槽與作用域插槽的合并和覆蓋行為 ,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

Vue 測(cè)試版本：Vue.js v2.5.13

Vue 文檔：

<slot> 元素可以用一個(gè)特殊的特性 name 來(lái)進(jìn)一步配置如何分發(fā)內(nèi)容。多個(gè)插槽可以有不同的名字。具名插槽將匹配內(nèi)容片段中有對(duì)應(yīng) slot 特性的元素。

仍然可以有一個(gè)匿名插槽，它是默認(rèn)插槽，作為找不到匹配的內(nèi)容片段的備用插槽。

具體應(yīng)用的時(shí)候：

1、匿名插槽的合并行為：

<div id="app">
    <myele>
      <div>
        default slot
      </div>
      <div>
        <div>from parent!</div>
        <div>from parent!</div>
      </div>
    </myele>
  </div>
window.onload = function() {
  Vue.component('myele', {
    template: `         
     <div>
     <slot></slot>
     </div>
    `
  }); 
  new Vue({
    el: '#app'
  });
};

效果：內(nèi)容合并

2、匿名作用域插槽的覆蓋行為：

 <div id="app">
    <myele>
      <div slot-scope="props">
        <div>from parent!</div>
        <div>from {{props.text}}</div>
      </div>
      <div slot-scope="prop">
        <div>from </div>
        <div>{{prop.text}}</div>
      </div>    
    </myele>
  </div>
window.onload = function() {
  Vue.component('myele', {
    template: `         
     <div>     
     <slot text="child"></slot>
     <slot text="child2"></slot>
//即使 text 和上一行一樣，也不會(huì)報(bào)錯(cuò)，開(kāi)發(fā)環(huán)境     </div>
    `
  }); 
  new Vue({
    el: '#app'
  });
};

效果：以靠后的作用域插槽模板為準(zhǔn)，繪制了兩遍；

3、匿名插槽模板和作用域插槽模板混合：

<div id="app">
    <myele>
      <div>
        default slot
      </div>      
      <div slot-scope="props">
        <div>from parent!</div>
        <div>from {{props.text}}</div>
      </div>
    </myele>
  </div>
window.onload = function() {
  Vue.component('myele', {
    template: `         
     <div>     
     <slot></slot>
     <slot text="child"></slot>
     </div>
    `
  }); 
  new Vue({
    el: '#app'
  });
};

效果：匿名插槽以匿名作用域插槽模板為準(zhǔn)進(jìn)行渲染，即使你把匿名插槽模板放后面，也是一樣的結(jié)果；

由此可以看出，最好不要使用匿名、默認(rèn)插槽，最好使用具名插槽，可以減少不確定性；

參考文檔：

https://cn.vuejs.org/v2/guide/components.html#具名插槽

總結(jié)

以上所述是小編給大家介紹的Vue匿名插槽與作用域插槽的合并和覆蓋行為,希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

您可能感興趣的文章:

相關(guān)文章

仿ElementUI實(shí)現(xiàn)一個(gè)Form表單的實(shí)現(xiàn)代碼
這篇文章主要介紹了仿ElementUI實(shí)現(xiàn)一個(gè)Form表單的實(shí)現(xiàn)代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
Vue動(dòng)態(tài)組件實(shí)例解析
讓多個(gè)組件使用同一個(gè)掛載點(diǎn)，并動(dòng)態(tài)切換，這就是動(dòng)態(tài)組件。這篇文章主要介紹了Vue動(dòng)態(tài)組件 ,需要的朋友可以參考下
2017-08-08
Vue 第三方字體圖標(biāo)引入 Font Awesome的方法
今天小編就為大家分享一篇Vue 第三方字體圖標(biāo)引入 Font Awesome的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
Vue函數(shù)式組件專篇深入分析
Vue提供了一種稱為函數(shù)式組件的組件類型,用來(lái)定義那些沒(méi)有響應(yīng)數(shù)據(jù),也不需要有任何生命周期的場(chǎng)景,它只接受一些props來(lái)顯示組件,下面這篇文章主要給大家介紹了關(guān)于Vue高級(jí)組件之函數(shù)式組件的使用場(chǎng)景與源碼分析的相關(guān)資料,需要的朋友可以參考下
2023-01-01
Vue3使用contenteditable打造定制化輸入
contenteditable 屬性為網(wǎng)頁(yè)開(kāi)發(fā)者提供了一種靈活的方式來(lái)創(chuàng)建可編輯的內(nèi)容區(qū)域,使用戶可以直接在網(wǎng)頁(yè)上進(jìn)行內(nèi)容編輯,而無(wú)需依賴傳統(tǒng)的輸入框,本文將利用contenteditable打造定制化輸入,感興趣的可以了解下
2023-12-12
解決vuecli3.0熱更新失效的問(wèn)題
今天小編就為大家分享一篇解決vuecli3.0熱更新失效的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
require.js 加載 vue組件 r.js 合并壓縮的實(shí)例
這篇文章主要介紹了require.js 加載 vue組件 r.js 合并壓縮的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-10-10
vue輪播圖插件vue-awesome-swiper的使用代碼實(shí)例
本篇文章主要介紹了vue輪播圖插件vue-awesome-swiper的使用代碼實(shí)例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-07-07
關(guān)于vuex的學(xué)習(xí)實(shí)踐筆記
vuex是vue的狀態(tài)管理模式，主要可以解決父子組件嵌套層數(shù)較多，或者兄弟組件之間需要維護(hù)同一個(gè)狀態(tài)的情況。下面這篇文章主要給大家介紹了關(guān)于學(xué)習(xí)vuex的相關(guān)資料，需要的朋友可以參考學(xué)習(xí)，下面來(lái)一起看看吧。
2017-04-04
基于vue3+threejs實(shí)現(xiàn)可視化大屏效果
本文主要主要講述對(duì)threejs的一些api進(jìn)行基本的封裝，在vue3項(xiàng)目中來(lái)實(shí)現(xiàn)一個(gè)可視化的3d項(xiàng)目，包含了一些常用的功能，場(chǎng)景、燈光、攝像機(jī)初始化，模型、天空盒的加載，以及鼠標(biāo)點(diǎn)擊和懸浮的事件交互,感興趣的朋友可以參考下
2023-06-06