Vue插槽

插槽

插槽内可以包含任何模板代码，包括 HTML，其他组件。
当一个父组件需要传dom元素给子组件可以使用插槽

<template>
    <div>
       <v-home>
        <h1>父组件传的内容</h1>
       </v-home>
    </div>
</template>
<script>
export default{
    components:{
        "v-home":{
            template:`<div>
                        <p>子组件</p>
                        <slot></slot>
                    </div>`
        }
    }
}
</script>

这里的<slot></slot>会被父组件传过来的<h1>父组件传的内容</h1>替换掉

默认内容：

就是在slot标签之间附上默认内容
我们将子组件的内容换成

"v-home":{
            template:`<div>
                        <p>子组件</p>
                        <slot>默认内容</slot>
                    </div>`
        }

那么，如果模板里如此写<v-home> </v-home>，或显示为默认内容。

具名插槽：给插槽起名字，按需引入插槽

<template>
    <div>
       <v-home>
        <div class="header" slot="header">header</div>
        <div class="footer" slot="footer">footer</div>
       </v-home>
    </div>
</template>
<script>
export default{
    components:{
        "v-home":{
            template:`<div>
                        <slot name="header"></slot>
                        <div class="body">body</div>
                        <slot name="footer"></slot>
                    </div>`
        }
    }
}
</script>

作用域插槽

举个例子，当子组件内部需要做循环，但是循环的样式必须有外部决定（<li>{{props.item}}</li>可以改成<h1>{{props.item}}</h1>或者其他），那么可以使用作用域插槽。
当父组件调用子组件是，传入的元素必须要由一个template标签包裹，由slot-scope="props"接收子组件循环的数据。

<template>
    <div>
       <v-home>
            <template slot-scope="props">
                <li>{{props.item}}</li>
            </template>
       </v-home>
    </div>
</template>
<script>
export default{
    components:{
        "v-home":{
            data:function(){
                return{
                    list:[1,2,3,4,5]
                }
            },
            template:`<div>
                        <ul>
                            <slot v-for="item of list"
                                :item='item'
                            ></slot>
                        </ul>
                    </div>`
        }
    }
}
</script>

以上代码子组件实际上会编译为(个人理解)：

        <ul>
			<template  v-for="item of list">
                <li>{{item}}</li>
            </template>
        </ul>

总结

1、插槽，可以理解为组件标签包裹dom结构或组件，包裹的dom结构或组件会替换在组件内的<slot></slot>元素。
2、默认内容：插槽可以有默认值<slot>默认内容</slot>，即使父组件调用子组件时不传入dom结构，会显示slot包裹的默认内容
3、具名插槽：生命slot时带上name特性<slot name="kk"></slot>，然后在父组件在子组件插入dom结构时，带上slot="kk"特性，如<div class="header" slot="header">header</div>
4、作用域插槽：父组件使用插槽时，可以获取子组件传来的数据，必须使用template包裹dom结构，使用slot-scope获取子组件传过来的数据
子组件： <slot v-for="item of list" :item='item'></slot>
父组件：使用slot-scope="props"获取一个props对象，这个对象包含子组件传过来的数据

       <v-home>
            <template slot-scope="props">
                <li>{{props.item}}</li>
            </template>
       </v-home>