vue插槽的理解和用法

§1.插槽

理解：
插槽是什么东西，其实就vue提供的一个父组件在使用子组件的时候向子组件中传递结构的方法，子组件中的slot就相当于函数的形参，父组件中传递的结构就是实参，调用的结果就是实参代替了形参的内容。、

实例：

<!--父组件-->
<template >
<div id="app">
<SlotDemo>
<template slot="header">
<p>{{ header }}</p>
</template>
<template slot="body">
<p>{{ body }}</p>
</template>
<template slot="footer" slot-scope="slotProps">
// 作用域插槽（用于向子组件向父组件传递，再由父组件传回）
// 相当于在一个插槽的作用域对象上挂载了一个属性ht
<p>{{ slotProps.ht }}</p>
</template>
</SlotDemo>
</div>
</template>

data () {
return {
header:'我是脑袋',
body:'身体',
footer:'我是脚',
}
},

<!--子组件-->
<template>
<div>
<slot name="header"></slot>
<slot name="body"></slot>
<slot name="footer" :ht="footer"></slot>
</div>
</template>

1.基本插槽：

<slot></slot>

2.具名插槽：为插槽指定名称。必须一一对应

<!--父组件-->
<template slot="header">
<p>{{ header }}</p>
</template>
<!--子组件-->
<slot name="header"></slot>

3.插槽的默认内容

<slot name="header">{ error }</slot>
当父组件给子组件传递结构时，子组件会使用默认值

4.编译作用域:父组件模板的所有东西都会在父级作用域内编译；子组件模板的所有东西都会在子级作用域内编译。

5.作用域插槽

<!--父组件-->
<template slot="footer" slot-scope="slotProps">
// 作用域插槽（用于向子组件向父组件传递，再由父组件传回）
// 相当于在一个插槽的作用域对象上挂载了一个属性ht
<p>{{ slotProps.ht }}</p>
</template>
<!--子组件     -->
<slot name="footer" :ht="footer"></slot>