父向子传值只能解决数据动态变化的问题,插槽可以解决结构可以自定义的问题
使用方式---默认插槽
1.使用slot标签占位
2.在父组件中,使用子组件时,标签中间传入自定义结构
插槽的默认值: 如果没有传入自定义结构,那么将会使用slot标签中的内容
具名插槽
当一个组件有多个结构需要外部传入,可以使用具名插槽识别
- 给每个slot标签设置name属性
- 设置多个 template 标签,配合v-slot:插槽名 确定位置 // v-slot 可以简写为 #
父组件中:
<子组件>
<template v-slot:插槽名>
语句
</template>
</子组件>
子组件中:
<slot>
</slot>
作用域插槽
在父组件中使用子组件的数据时,可以通过插槽携带过来,供将来使用
使用:
1.给子组件中的 slot标签 添加自定义属性,将需要传给父组件的数据存入自定义属性
2.添加的自定义属性将会被收集起来,以 键值对的形式 存入到一个对象中
3.在父组件中 使用 v-solt:插槽名="变量名" 对应具名插槽收集的自定义属性 产生的对象会存入该变量中
4.调用该对象以使用子组件中的数据
