定义:插槽是父子组件的另外一种交互形式,子组件在自己的组件中提供了一个占位符,父组件可以在这个占位中填充任何代码,在渲染过程中,父组件填充的代码会渲染到这个占位符的位置;
[1]默认插槽
-
父组件
<son> <!-- 填充代码 --> </son>
-
子组件
<template> <!-- slot为占位符 --> <slot></slot> </template>
[2]具名插槽
-
当一个子组件中带有多个插槽时,需要使用名字加以区分
-
父组件
v-slot:插槽名
可以简写为#插槽名
<son> <template v-slot:插槽名> <!-- 填充代码 --> </template> </son>
-
子组件
<template> <slot name='插槽名'></slot> </template>
[3]携带参数
-
父组件
<!-- 默认插槽携带参数--> <son> <template v-slot:default='data'> <!-- 使用data数据 --> </template> </son> <!-- 具名插槽携带参数 --> <son> <template v-slot:插槽名='data'> <!-- 使用data数据 --> </template> </son>
-
子组件
<template> <slot name='插槽名' :data='传递的参数'></slot> </template>