溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

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

發(fā)布時間：2020-10-03 21:24:32 來源：腳本之家 閱讀：105 作者：v折耳 欄目：web開發(fā)

使用slots 分發(fā)內(nèi)容

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

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

直接套用組件的話，父級組件會將子級組件覆蓋掉，不能實現(xiàn)需求的效果，為了實現(xiàn)該效果就需要使用 slots來內(nèi)容分發(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>

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

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

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

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

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

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

代碼效果圖如下：

<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 slots 組件的組合/分發(fā)實例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手