关于vue.js:vue中使用slot如何把子组件里面的内容传递给父组件

vue中有时让插槽内容可能拜访子组件中才有的数据是很有用的。例如，构想一个带有如下模板的 <current-user>组件：

<span>
  <slot>{{ user.lastName }}</slot>
</span>

咱们可能想换掉备用内容，用名而非姓来显示。如下：

<current-user>
  {{ user.firstName }}
</current-user>

然而上述代码不会失常工作，因为只有 <current-user> 组件能够拜访到 user，而咱们提供的内容是在父级渲染的。

为了让 user 在父级的插槽内容中可用，咱们能够将 user 作为 <slot> 元素的一个 attribute 绑定下来：

<span>
  <slot v-bind:user="user">
    {{ user.lastName }}
  </slot>
</span>

绑定在 <slot> 元素上的 attribute 被称为插槽 prop。当初在父级作用域中，咱们能够应用带值的 v-slot 来定义咱们提供的插槽 prop 的名字：
（注：这里不肯定必须叫slotProps，也能够随便定义为你想叫的名字）

<current-user>
  <template v-slot:default="slotProps">
    {{ slotProps.user.firstName }}
  </template>
</current-user>