Vue中的插槽 — 具名插槽、作用域插槽

1、Vue中插槽的作用和使用方法

定义一个名cmpOne子组件，为该子组件添加内容应该在子组件的template中定义，直接在父组件的标签中

<cmp-one></cmp-one>

里定义的内容不会被渲染，如下例：

<div id="app">
	<cmp-one>
        <span>使用插槽后渲染的内容</span>
    </cmp-one>
</div>
<script>
    const cmpOne = {
        template: `<div>
                      <p>子组件渲染的内容</p>
                   </div>`
    }
    const vm = new Vue({
        el: '#app',
        // 注册组件
        components: {
            cmpOne
        }
    })
</script>
           

结果为：

使用插槽后

<cmp-one></cmp-one>

里定义的内容就会被渲染出来。在子组件template中加入元素占位，结果为：

<script>
    const cmpOne = {
        template: `<div>
                       <p>子组件渲染的内容</p>
                       <slot></slot>
                   </div>`
    }
    const vm = new Vue({
        el: '#app',
        // 注册组件
        components: {
            cmpOne
        }
    })
</script>
           

结果为：

<cmp-one></cmp-one>

里定义的内容就会被渲染出来

2、具名插槽

有时会需要多个插槽，

<slot>

元素有一个特殊的特性：name。这个特性可以用来定义额外的插槽，代码如下：

<div id="app">
	<cmp-one>
        <p slot="before">在p元素之前</p>
        <p slot="after">在p元素之后</p>
    </cmp-one>
</div>
<script>
    const cmpOne = {
        template: `<div>
                      <slot name="before"></slot>
                      <p>p元素：子组件渲染的内容</p>
                      <slot name="after"></slot>
                   </div>`
    }
    const vm = new Vue({
        el: '#app',
        // 注册组件
        components: {
            cmpOne
        }
    })
</script>
           

结果为：

3、作用域插槽

案例：在父组件中定义一个数组，在子组件中使用v-for创建一个列表循环，然后在父组件中通过子组件标签

<cmp-two></cmp-two>

调用：

<div id="app">
    <cmp-two :list="list"></cmp-two>
    <cmp-two :list="list"></cmp-two>
</div>
<script>
    const cmpTwo = {
        props: ['list'],
        template: `<div>
                        <ul>
                            <li v-for="(item,index) in list" :key="index">
                                 {{item}} - {{index}}
                            </li>
                        </ul>
                    </div>`
    }
    const vm = new Vue({
        el: '#app',
        // 注册组件
        components: {
            cmpTwo
        },
        data() {
            return {
                list: [1, 2, 3]
            }
        },
    })
</script>
           

结果为：

调用了两次

<cmp-two></cmp-two>

组件，因为调用的是同一个子组件，所以显示的内容完全一样。如何使调用同一个子组件展示不一样的效果，即为作用域插槽的作用。代码如下：

<div id="app">
    <!-- 作用域插槽 -->
   <cmp-two :list="list">
       <template slot-scope="list">
           <li>{{list.item}} - {{list.index}}</li>
       </template>
   </cmp-two>
   <cmp-two :list="list">
       <template slot-scope="list">
           <li>{{list.index}} - {{list.item}}</li>
       </template>
   </cmp-two>
</div>
<script>
    const cmpTwo = {
        props: ['list'],
        template: 
	        `<div>
               <ul>
                  <slot v-for="(item,index) in list" :item="item" :index="index"></slot>
               </ul>
	        </div>`
    }
    const vm = new Vue({
        el: '#app',
        // 注册组件
        components: {
            cmpTwo
        },
        data() {
            return {
                list: [1, 2, 3]
            }
        },
    })
</script>
           

结果为：