如何將數據傳遞給組件中的插槽？

Question

一個具體的例子。我想爲Bootstrap的網格佈局構建一個組件。我希望能夠做這樣的事情（這是無效的Vue公司代碼）：

BGrid.vue：

<template> 
    <div class="container"> 
    <div class="row"> 
     <slot name="col" class="'col' + colNumber"></col> 
    </div> 
    </div> 
<template> 

App.vue

<template> 
    <div class="container"> 
    <b-grid> 
     <template slot="name" :colNumber="2"> 
     <p>Content for the column 1</p> 
     </template> 
    <template slot="name" :colNumber="4"> 
     <p>Content for the column 2</p> 
     </template> 
    </b-grid> 
    </div> 
<template> 

（我想能夠針對不同的插槽具有不同的colNumbers）。

有沒有辦法在Vue中完成類似的事情？

Answer 1

如果要發射div，並將類設置爲col-加上列號，可以將列號作爲屬性傳遞給組件。

console.clear() 
 

 
Vue.component("b-grid",{ 
 
    props:["colNumber"], 
 
    template: ` 
 
    <div class="container"><slot></slot></div> 
 
    ` 
 
}) 
 

 
Vue.component("row",{ 
 
    template: ` 
 
    <div class="row"><slot></slot></div> 
 
    ` 
 
}) 
 

 
Vue.component("column",{ 
 
    props:["colNumber"], 
 
    template:` 
 
    <div :class="'col-' + colNumber"> 
 
     <slot></slot> 
 
    </div> 
 
    ` 
 
}) 
 

 
new Vue({ 
 
    el:"#app" 
 
})

<script src="https://unpkg.com/vue@2.2.6/dist/vue.js"></script> 
 
<div id="app"> 
 
    <b-grid> 
 
    <row> 
 
     <column :col-number="2"> 
 
     <p>Content for 2 column</p> 
 
     </column> 
 
     <column :col-number="6"> 
 
     <p>Content for 6 column</p> 
 
     </column> 
 
    </row> 
 
    </b-grid> 
 
</div>

在上述例子中，檢查內容看出，類適當設定。