如何将数据传递给组件中的插槽？

一个具体的例子。我想为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中完成类似的事情？

来源

2017-06-16 alex

为什么不把它作为道具传递给'b-grid'组件？ – Bert

@BertEvans你能给我一个示例代码？我仍然可以添加内容到插槽吗？如何控制哪个插槽具有哪个colNumber？ – alex

如果要发射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/[email protected]/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>

在上述例子中，检查内容看出，类适当设定。

来源

2017-06-16 01:57:37 Bert

如果我想为不同的列添加不同的colNumbers，该怎么办？请看我更新的问题。 – alex

@alex我不会使用插槽，我可能会使用列组件。如果这是为了复制Bootstrap的网格系统，你可能想要一个容器，行和列是正确的？ – Bert

@alex检查更新。 – Bert

如何将数据传递给组件中的插槽？

回答

相关问题