VUE07--{插槽}

定义

定义子组件的时候，在子组件内部刨了一个坑（<slot></slot>），父组件想办法往坑里填内容。

单个插槽

定义：子组件中<slot></slot>
使用：父组件使用带有插槽组件时，父组件中对应的内容，会插入插槽中显示

    <div id="app">
        <!-- 2. 父组件，往坑里填内容 -->
        <son>
            苍茫惊现青狐妖
        </son>
    </div>
    <script>
        // 1. 子组件，内部刨坑，<slot></slot>
        Vue.component("son", {
            template: `<div>
                暗夜步出竹林桥
                <slot></slot>    
            </div>`
        })
        var vm = new Vue({
            el: "#app",
            data: {
                
            },
        })
    </script>

多个（具名）插槽

定义：子组件挖坑<slot name='lyric'></slot>
使用：父组件使用<p slot='lyric'>苍茫惊现青狐妖</p>

    <div id="app">
        <!-- 2. 父组件，往坑里填内容，slot值要和子组件坑里的name值对应 -->
        <son>
            <p slot="slotA">苍茫惊现青狐妖</p>
            <p slot="slotB">锦绣织缎裹素腰</p>
        </son>
    </div>
    <script>
         // 1. 子组件，内部刨坑，<slot></slot>，因为定义了多个slot，所以要为每个slot起name名称
        Vue.component("son", {
            template: `<div>
            暗夜步出竹林桥
            <slot name='slotA'></slot>   
            <slot name='slotB'></slot>   
            </div>`
        })
        var vm = new Vue({
            el: "#app",
            data: {
                
            },
        })
    </script>

作用域插槽

定义：子组件挖坑时，可以通过【属性传值】的方式，为插槽传递数据
使用：父组件使用插槽时，通过定义slot-scope='value'属性，接收子组件传来的插槽数据
同一组件，不同插槽的作用域，是独立的

    <div id="app">
        <!-- 2. 父组件，往坑里填内容。内容通过slot-scope从子组件拿到 -->
        <son>
            <p slot="slotA" slot-scope="data">{{data}}</p>
            <hr>
            <p slot="slotB" slot-scope="data">{{data.lyc.second}}</p>
        </son>
    </div>
    <script>
        Vue.component('son', {
            // 1. 子组件挖坑。挖坑同时，【属性传值】给插槽。slotA--直接定义在属性的值，soltB--从data中取出的值
            template:  `<div>
                <slot name='slotA' lyc='暗夜步出竹林桥'></slot>
                <slot name='slotB' :lyc='lycData'></slot>
            </div>`,
            data () {
                return {
                    lycData: {
                        second: '苍茫惊现青狐妖',
                        third: '锦绣织缎裹素腰',
                    }
                }
            }
        })
        var vm = new Vue({
            el: "#app",
            data: {
                
            },
        })
    </script>