VUE组件中插槽的理解与使用

VUE组件中插槽的理解与使用

什么是插槽？

插槽就是子组件中的提供给父组件使用的一个占位符，用<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签。通俗的说是：slot 是在父组建控制了子组件显示或隐藏相关内容

插槽的分类：
1、普通插槽：通过一个 slot 标签声明一个区域来为它存放实参，

 Vue.component('child',{
                template:`<div><slot>你好</slot></div>`
            })
            new Vue({
                el:'#app',
                template:`<div><child>hello</child></div>`
            })

如果在上面这个代码中，子组件没有 slot 标签，那么父组件中 hello 文本将会被 忽略。从函数的角度来理解，这里的 slot 相当于一个形参，hello 相当于一个实 参，如果没有 slot 的接收，hello 就渲染不到页面上。Slot 标签中的“你好”是 默认值 default，如果父元素没有传值，将会显示默认值“你好”

2、具名插槽：在一个组件中有多个插槽，调用的时候为了给不同的组件传递
参数就需要为插槽进行命名。为不同需求的组件传递不同的参数。

			 //具名插槽
            Vue.component('child',{
                template:`<div>
                            <slot name="header"></slot>
                            <h1><slot name="footer"></slot></h1>
                        </div>`
            })
            new Vue({
                el:'#app',
                template:`<child>
                            <template v-slot:header>This is header</template>
                            <template v-slot:footer>This is footer</template>
                        </child>`
            })

代码中，子组件中有 header 和 footer 两个 name 不同的 flot，他们所接收的文本
根据 name 的不同而接收的值不同。Footer 的 h1 标签也体现了不同值满足不同
的需求。从函数角度出发，具名插槽可以理解为是传递了多个不同参数。 这
里 不 仅 可 以 在 父 组 件 与 子 组 件 中 操 作 ， 也 可 以 通 过 在 html 代码中加入想要加入的片段。

<div id="app">
	<child>
       	<template v-slot:header>您好1</template>
       	<template v-slot:footer>您好2</template>
	</child>
</div>

3、作用域插槽：作用域插槽的样式由父组件决定，内容却由子组件控制。前
两种插槽不能绑定数据，作用域插槽是一个带绑定数据的插槽。简单的来说就是
子组件提供给父组件参数，该参数仅限于插槽中使用，父组件可以根据子组件传
过来的插槽数据来进行不同的方式展现和填充插槽的内容

//slot插槽，为div中的实共提供插入位置
template:`
	<div> 
		<p><s1ot :user-"user" :list-"list >slot</s1ot></p>
	</div>`

<div id="app">
	<my-div>
       	<template v-slot:default="scope">
       		{{scope.user.name}}--{{scope.list}}
       	</template>
	</my-div>
</div>

在 template 标签中使用 v-slot：default=‘scope’；scope 是 template 标签
中可以使用的作用域对象。scope 中存放着 user、和 list 中的参数。