十三.插槽

插槽

插槽:

子组件中的提供给父组件使用的一个占位符，用 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的标签。

解决问题：多个组件使用同一个子组件，需要传入或修改数据时，需要利用插槽。

1.子组件设置插槽 2.父组件填充内容, 父组件通过 v-slot:[name] 的方式指定到对应的插槽中,父组件填充内容时，是可以根据这个名字把内容填充到对应插槽中的

子组件设置插槽:
1.使用<slot></slot> 默认插槽
2.设置指定的需要使用<slot name="header"></slot>
3.外部可以设置标签,slot标签内不能设置标签


父组件填充内容:
1.填充时，全部内容需要写在子组件标签内
2.默认插槽使用<template>我是默认插槽的内容</template>或者<p slot>默认</p>
并且不会覆盖，会同时存在,子组件有多个默认插槽，而父组件所有指定到默认插槽的填充内容
将“会” “全都”填充到子组件的每个默认插槽中。
3.已命名插槽使用<h4 slot="header">我是头部</h4>或者
<template v-slot:header>我是头部内容</template>
其中template会覆盖同标签的插槽内容
4.内部可以使用标签<h4 slot="header"><b>内部使用标签</b></h4>
5.可以使用父组件中的data数据和methods方法