props 与 slot 的区别

props

父组件传给子组件参数

• 用来接收参数，父组件向子组件传参，可以放在 props 中
• 该参数是一个响应式数据，props 的更改会导致子组件的刷新

slot

父组件传给子组件模板

• 用于在组件中插入内容或者组件之间的相互嵌套，如果组件中有需要单独定义的地方可以使用 slot
• <slot>元素上绑定的 attribute 称为插槽 prop（示例中的 user）
• v-slot 指令可以将子组件内部的 插槽 prop 提供给父组件使用

  <!-- 子组件 current-user -->
  <span>
      <slot v-bind:user="user"> {{ user.lastName }} </slot>
  </span>
  

  <!-- 父组件中使用 -->
  <!-- slotProps 是一个包含所有插槽 prop 的对象，命名随意 -->
  <current-user>
      <template v-slot:default="slotProps">
          {{ slotProps.user.firstName }}
      </template>
  </current-user>
  

  <!-- 父组件中使用（错误） -->
  <current-user> {{ user.firstName }} </current-user>
  <!-- 此时的 user 访问的是父组件中的 user，因此可能为 undefined -->