Vue基础-作用域插槽-列表组件

Vue 测试版本：Vue.js v2.5.13

Vue 官网介绍作用域插槽时，

在 2.5.0+，slot-scope 能被用在任意元素或组件中而不再局限于 <template>。

作用域插槽更典型的用例是在列表组件中，允许使用者自定义如何渲染列表的每一项：

例子：

<my-awesome-list :items="items">
  <!-- 作用域插槽也可以是具名的 -->
  <li
    slot="item"
    slot-scope="props"
    class="my-fancy-item">
    {{ props.text }}
  </li>
</my-awesome-list>

列表组件的模板：

<ul>
  <slot name="item"
    v-for="item in items"
    :text="item.text">
    <!-- 这里写入备用内容 -->
  </slot>
</ul>

其实到这里，我自己倒腾了下，一开始没有弄出来，后来理了理思绪才弄出来，完整代码是这样：

<parent-component v-bind:items="items"></parent-component>

window.onload = function() {

    Vue.component('parent-component', {
        template: `
     <my-awesome-list :items="items">
     <!-- 作用域插槽也可以是具名的 -->
        <li
          slot="item"
          slot-scope="props"
          >
          {{ props.text }}
        </li>
      </my-awesome-list>
       `,
        props: ['items']
    });

    Vue.component('my-awesome-list', {
        template: `
        <ul>
          <slot name="item"
            v-for="item in items"
            :text="item.text">
            <!-- 这里写入备用内容 -->
          </slot>
        </ul>
        `,
        props: ['items']
    });

    new Vue({
        el: '#app',
        data: {
            items: [
                { text: '111' },
                { text: '222' },
                { text: '333' }
            ]
        }
    });
};

当然，也可以这样：

<my-awesome-list :items="items">
            <!-- 作用域插槽也可以是具名的 -->
            <li slot="item" slot-scope="props">
                {{ props.text }}
            </li>
</my-awesome-list>

window.onload = function() {

    Vue.component('my-awesome-list', {
        template: `
        <ul>
          <slot name="item"
            v-for="item in items"
            :text="item.text">
            <!-- 这里写入备用内容 -->
          </slot>
        </ul>
        `,
        props:['items']
    });

    new Vue({
        el: '#app',
        data: {
            items: [
                { text: '111' },
                { text: '222' },
                { text: '333' }
            ]
        }
    });
};

参考文档：

https://cn.vuejs.org/v2/guide/components.html#作用域插槽

转载于:https://www.cnblogs.com/xianshenglu/p/8469478.html