插槽学习

1.插槽
子组件<child>里的内容不会被渲染，子组件template中加入<slot>元素占位便能渲染父组件<child>标签下的内容，<slot>标签内可放默认展示内容

<div id='root'>
        <child>
            <p>hello</p>
        </child>
    </div>
    <script>
        Vue.component('child',{
            props:['content'],
            template:'<div><p>helloo</p><slot></slot></div>'
        })
        var vm = new Vue({
            el:'#root'
        })
    </script>

2.具名插槽
当需要多个插槽时，可以使用<slot>的特性：name

    <div id='root'>
        <child>
            <div class="header" slot='header'>header</div>
            <div class="footer" slot='footer'>footer</div>
        </child>
    </div>
    <script>
        Vue.component('child',{
            props:['content'],
            template:'<div><slot name="header"></slot><p>helloo</p><slot name="footer"></slot></div>'
        })
        var vm = new Vue({
            el:'#root'
        })
    </script>

3.作用域插槽
调用了两次child组件，因为调用的是同一个子组件，所以显示的内容完全一样。作用域插槽的作用是在每次调用时能有各自的渲染效果。

<div id="root">
        <child>
            <template slot-scope="props"><!--定义一个插槽，该插槽必须放在template标签内-->
                <li>{{props.value}}</li><!--定义使用渲染方式-->
            </template>
        </child>
        <child>
            <template slot-scope="props">
                <h1>{{props.value}}</h1><!--定义不同的渲染方式-->
            </template>
        </child>
    </div>
    <script>
        Vue.component('child',{
            data: function(){
                return {
                    list:[1,2,3,4]
                }
            },
            template: `<div>
                            <ul>
                                <slot v-for="value in list" :value=value>//使用slot占位
                                </slot>
                            </ul>
                        </div>`
        })
        var vm=new Vue({
            el: '#root'
        })
    </script>

原文：https://blog.csdn.net/willard_cui/article/details/82469114