码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2018-02-25 17:17:45      阅读:365      评论:0      收藏:0      [点我收藏+]

标签:fan   org   ref   元素   component   5.0   自己   margin   http   

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#作用域插槽

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

标签:fan   org   ref   元素   component   5.0   自己   margin   http   

原文地址:https://www.cnblogs.com/xianshenglu/p/8469478.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!