【Vue】作用域插槽

• 父组件调用子组件
  1.在使用子组件的时候在里面插入任何内容，该内容会在子组件的 <slot> 处显示
  2.如果父组件没有在子组件中传入内容，且插槽有默认内容，则显示默认内容

父组件
<template>
  <div>
    <Children>Test</Children>
  </div>
</template>

子组件
<template>
  <h1>
    <slot>默认内容</slot>
  </h1>
</template>

• 作用域插槽
  1.当子组件中 data 有 user 数据，而想要在父组件中控制其显示内容
  2.则 子组件 将 user 传给 插槽，父组件通过子组件的属性获取到传递给插槽的内容
  ——接收数据的变量名可以随意取：如 slotProps
  ——或者通过 解构赋值 可以直接拿出来

// 子组件：在 slot 标签上绑定数据内容
<slot :user="user">默认内容</slot>

父组件
<template>
  <div>
    <Children>
		<template v-slot:default="{ user }">
		  {{ user.age }}
		<template>
	</Children>
  </div>
</template>