VUE初长成【vue 作用域插槽】

父组件可通过插槽prop访问子组件中才有的数据

解构插槽中的定义后备内容,用于插槽 propundefined 的情形

在子组件中的user应为未绑定的prop,如果绑定user会报错

子组件:

<slot>
  {{ user.firstName }}
</slot>

父组件:

v-bind在子组件上无效,用#default代替v-bind即可

<current-user #default="{ user = { firstName: 'Guest' } }">
  {{ user.firstName }}
</current-user>

v-bindtemplate上有效,#default/v-bind均可

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