Vue slot的使用。 about blog HOT 2 OPEN

/**
 * Test Vue scoped-slot
 */

Vue.component('SSS', {
  template: `
    <div>
      <div>
        <slot :y="d">
          {{d}}
        </slot>
      </div>
      <div>
        <slot :x="d" :y="d">
          {{d}}
        </slot>
      </div>
      <slot name="underline"></slot>
    </div>
  `,
  props: ['d']
})

const v = new Vue({
  template: `
    <div>
      <div v-for="(item, index) in list">
        <SSS :d="item">
          <span slot-scope="uuu" > %%% {{uuu}} 12312</span>
          <div slot="underline"> --------------- </div>
        </SSS>
      </div>
    </div>
  `,
  el: '#app5',
  data () {
    return {
      list: [{
        name: '1',
        text: '1111'
      }, {
        name: '2',
        text: '2222'
      }, {
        name: '3',
        text: '3333'
      }]
    }
  }
})