vue slots 組件的組合/分發實例

2019-11-19 13:00:38

字體：大中小

來源：轉載

供稿：網友

使用slots 分發內容

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

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

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

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>