vue slots 組件的組合/分發(fā)實例

更新時間：2018年09月06日 15:12:36 作者：v折耳

今天小編就為大家分享一篇vue slots 組件的組合/分發(fā)實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

使用slots 分發(fā)內容

使用組件時常常會有組件組合使用的情況，如下：

<componentA>
<componentB></componentB>
<componentC></componentC>
</componentA>

直接套用組件的話，父級組件會將子級組件覆蓋掉，不能實現(xiàn)需求的效果，為了實現(xiàn)該效果就需要使用 slots來內容分發(fā)

slots的使用方法如下：

<body>
 <div id="app">
 <app>
  <child></child>
  <child2></child2>
 </app>
 </div>
 </body>
 <script>
  Vue.component('app',{
  template:'\
 <div>\
  <slot>沒有則顯示這個</slot>\
  <li>111</li>\
  <li>222</li>\
  <li>333</li>\
 </div>\
 ',
  })
  var app=new Vue({
  el:'#app',
  components:{
  'child':{
   template:'<div>hello word</div>'
  },
  'child2':{
   template:'<div>hello vue js</div>'
  }
 
  }
 
  })
 </script>

<app></app>標簽沒有引入其他組件時顯示為圖1，有其他組件時顯示為圖2

同時可以實測到可以引入多個并列的組件，組件會依次顯示

但是這只能解決單個組件的引入，實際應用中需要多個應用的組件會在多個位置，為了解決這個問題，就得確定slot位置的唯一性為了確定slot 的vue 中可以給slot 添加行內 name來識別，

需要注意的是：同一父級下的slot 添加行內 name必須保證唯一；

子組件下的slot 的name 是可以與父級組件的slot name 重復的，及每一級具有相對獨立性。

代碼效果圖如下：

<body>
 <div id="app">
 <app>
  <child slot="slot1">
 
  </child>
 
  <div slot="slot2">How to use slot?</div>
 
 </app>
 </div>
 </body>
 <script>
  Vue.component('app',{
  template:'\
 <div>\
  <slot name="slot1">沒有則顯示這個</slot>\
  <li>111</li>\
  <li>222</li>\
  <slot name="slot2">沒有則顯示這個</slot>\
  <li>333</li>\
 </div>\
 ',
  })
  var app=new Vue({
  el:'#app',
  components:{
  'child':{
   template:'<div>hello word\
    <li>22222</li>\
   </div>'
  },
  'child2':{
   template:'<div>hello vue js</div>'
  }
 
  }
 
  })
 </script>

以上這篇vue slots 組件的組合/分發(fā)實例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

解決vue的component標簽渲染問題
這篇文章主要介紹了解決vue的component標簽渲染問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-03-03
vue事件修飾符和按鍵修飾符用法總結
本篇文章主要介紹了vue事件修飾符和按鍵修飾符用法總結，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-07-07
關于Vue中使用alibaba的iconfont矢量圖標的問題
這篇文章主要介紹了Vue使用alibaba的iconfont矢量圖標的問題，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2021-12-12
使用this.$router.go(-1)遇到的一些問題及解決
這篇文章主要介紹了使用this.$router.go(-1)遇到的一些問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-12-12
vue-cli3 karma單元測試的實現(xiàn)
這篇文章主要介紹了vue-cli3 karma單元測試的實現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-01-01
Vue中watch監(jiān)聽首次不生效的解決辦法
在 Vue 中,watch 屬性用于觀察和響應 Vue 實例上數(shù)據(jù)的變動,然而,默認情況下,watch 確實不會觸發(fā)組件創(chuàng)建時的變動,這里有幾種方式可以處理或繞過這個問題,需要的朋友可以參考下
2024-09-09
vue中this.$refs.name.offsetHeight獲取不到值問題
這篇文章主要介紹了vue中this.$refs.name.offsetHeight獲取不到值問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-05-05
vue-vuex中使用commit提交mutation來修改state的方法詳解
今天小編就為大家分享一篇vue-vuex中使用commit提交mutation來修改state的方法詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
Vue如何實現(xiàn)文件預覽和下載功能的前端上傳組件
在Vue.js項目中,使用ElementUI的el-upload組件可以輕松實現(xiàn)文件上傳功能,通過配置組件參數(shù)和實現(xiàn)相應的方法,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
2024-09-09
Vue3實現(xiàn)下拉選擇框多選功能的方法詳解
在vue的實際開發(fā)過程中,我們如何將以選中的值直接渲染到頁面中,下面這篇文章主要給大家介紹了關于Vue3實現(xiàn)下拉選擇框多選功能的相關資料,需要的朋友可以參考下
2023-09-09