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

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

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

Vue 測試版本：Vue.js v2.5.13

Vue 文檔：

<slot> 元素可以用一個(gè)特殊的特性 name 來進(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ò)，開發(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ì)大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！

您可能感興趣的文章:

相關(guān)文章

Vue開發(fā)中遇到的跨域問題及解決方法
在本篇文章里小編給大家整理的是關(guān)于Vue開發(fā)中遇到的跨域問題及解決方法，需要的朋友們可以學(xué)習(xí)下。
2020-02-02
VUE3基于vite封裝條形碼和二維碼組件的詳細(xì)過程
基礎(chǔ)組件開發(fā)是項(xiàng)目業(yè)務(wù)開發(fā)的基石, 本文主要介紹了通過vue3的vite腳手架快速搭建項(xiàng)目, 開發(fā)條形碼和二維碼組件的過程,感興趣的朋友跟隨小編一起看看吧
2023-08-08
一篇文章教你實(shí)現(xiàn)VUE多個(gè)DIV,button綁定回車事件
這篇文章主要介紹了VUE多個(gè)DIV綁定回車事件，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2021-10-10
vue3使用vue-router的完整步驟記錄
Vue Router是Vue.js (opens new window)官方的路由管理器,它和 Vue.js 的核心深度集成,讓構(gòu)建單頁面應(yīng)用變得易如反掌,這篇文章主要給大家介紹了關(guān)于vue3使用vue-router的相關(guān)資料,需要的朋友可以參考下
2021-06-06
Vue組件通信深入分析
對(duì)于vue來說，組件之間的消息傳遞是非常重要的，用vue可以是要組件復(fù)用的，而組件實(shí)例的作用域是相互獨(dú)立，這意味著不同組件之間的數(shù)據(jù)無法互相引用，一般來說，組件之間可以有幾種關(guān)系，下面是我對(duì)組件之間消息傳遞的常用方式的總結(jié)
2022-08-08
Vue手動(dòng)埋點(diǎn)設(shè)計(jì)的方法實(shí)例
這篇文章主要給大家介紹了關(guān)于Vue手動(dòng)埋點(diǎn)設(shè)計(jì)的相關(guān)資料,內(nèi)容簡明扼要并且容易理解,絕對(duì)能使你眼前一亮,需要的朋友可以參考下
2022-03-03
Vue?全部生命周期組件梳理整理
這篇文章主要介紹了Vue?全部生命周期組件梳理整理，在創(chuàng)建組件之前使用；在實(shí)例初始化之后,進(jìn)行數(shù)據(jù)偵聽和事件，偵聽器的配置之前同步調(diào)用
2022-06-06
vue-Router安裝過程及原理詳細(xì)
路由是網(wǎng)絡(luò)工程里面的專業(yè)術(shù)語，就是通過互聯(lián)把信息從源地址傳輸?shù)侥康牡刂返幕顒?dòng)。本質(zhì)上就是一種對(duì)應(yīng)關(guān)系。分為前端路由和后端路由。小編將再下面文章為大家做詳細(xì)介紹，感興趣的小伙伴請和小編一起來學(xué)習(xí)吧
2021-09-09
vue-cli3項(xiàng)目展示本地Markdown文件的方法
這篇文章主要介紹了vue-cli3項(xiàng)目展示本地Markdown文件的方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-06-06
Vue實(shí)現(xiàn)計(jì)算器計(jì)算效果
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)計(jì)算器計(jì)算效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-08-08