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>
           

結果為：