一、插槽的理解

官網介紹

Vue 實現了一套內容分發的 API，將 <slot> 元素作為承載分發內容的出口。

為什麼使用插槽

Vue 中有一個重要的概念-元件，可以在開發中將子元件插入到父元件中，因此需要給子元件元件留出位置（這裡的元件我的理解是可以理解成sql的一個佔位符.），如圖slot提供可以插入的位置，我們將component1和component2插入到big component中。

二、使用步驟

1.希望最終得到的頁面

<div id="app">
    <div>
        <h3>圖書列表</h3>
        <ul>
            <li>紅樓夢</li>
        </ul>
    </div>
</div>
 

可以將該頁面分為三部分來看，將這三部分註冊成vue的元件

2.元件註冊

<div id="app">
    <book-component></book-component>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
<script>
    //圖書元件
    Vue.component('book-component',{
        template: '<div><h3>圖書列表</h3><ul><li>紅樓夢</li></ul></div>'
    });
    //圖書標題元件
    Vue.component('book-component-title',{
        template: '<h3>圖書列表</h3>'
    });
    //圖書列表元件
    Vue.component('book-component-list',{
        template: '<li>紅樓夢</li>'
    });
    let vApp = new Vue({
        el: '#app'
    });
</script>
 

直接引入註冊的元件就能實現列表展示，下面需要把子元件插入到父元件中

3.新增插槽

<div id="app">
    <book-component>
        <book-component-title slot="title"></book-component-title>
        <book-component-list slot="list"></book-component-list>
    </book-component>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
<script>
    //圖書元件
    Vue.component('book-component',{
        //<div>
        //    <slot name="title"></slot>
        //    <slot name="list"></slot>
        //</div>
        template: '<div><slot name=\'title\'></slot><ul><slot name=\'list\'></slot></ul></div>'
    });

    //圖書標題元件
    Vue.component('book-component-title',{
        template: '<h3>圖書列表</h3>'
    });
    //圖書列表元件
    Vue.component('book-component-list',{
        template: '<li>紅樓夢</li>'
    });
    let vApp = new Vue({
        el: '#app'
    });
</script>
 

在父元件中加入slot=""，父元件slot中name可以隨意指定；在子元件中加入<slot> 標籤，標籤的name必須和父元件對應

vue3.0後，v-slot:插槽名 取代了slot="插槽名"的寫法 可參考：https://www.cnblogs.com/LUA123/p/10812164.html

3.繫結資料並傳遞

<div id="app">
    <book-component>
        <book-component-title slot="title" v-bind:ti="title"></book-component-title>
        <book-component-list slot="list" v-for="li in list" v-bind:l="li"></book-component-list>
    </book-component>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
<script>
    //圖書元件
    Vue.component('book-component',{
        template: '<div><slot name=\'title\'></slot><ul><slot name=\'list\'></slot></ul></div>'
    });
    //圖書標題元件
    Vue.component('book-component-title',{
        props: ['ti'],
        template: '<h3>{{ti}}</h3>'
    });
    //圖書列表元件
    Vue.component('book-component-list',{
        props: ['l'],
        template: '<li>{{l}}</li>'
    });
    let vApp = new Vue({
        el: '#app'
        ,data: {
            title: '圖書列表'
            ,list: [
                '紅樓夢','三國演義','水滸傳','西遊記'
            ]
        }
    });
</script>

通過'props'接收引數，引數對應關係不要記錯就行。

繫結資料之後最終頁面