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>

（我希望能够为不同的col插槽提供不同的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>

在上面的示例中，检查内容以查看该类是否已正确设置。

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

1 个答案: