2.6.0版vue 插槽文档小结

Posted 2022-03-06 zhenxiang

<slot>插槽  一般使用组件时 在标签内填写的内容是不被编译的，当想要在父级使用组件时能填写内容则需要在定义组件时添加<slot></slot>标签，在插槽内可以给上默认内容，当父级调用时没有给内容时也就有了默认的值

 

一个不带 name 的 <slot> 出口会带有隐含的名字“default”。

具名插槽

在需要多个插槽的模板中，为了区分插槽，使用name属性，然后在父级使用组件时用v-slot:header区分要为哪个插槽添加内容，最后没有对应名字的就是子组件没有给名字的插槽要对应的内容。

<template v-slot:header> <h1>Here might be a page title</h1> </template>

 

作用域插槽

 

父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。

所以当在父级模板中使用子组件时添加插槽内容时，想要用子组件中的data数据是行不通的，作用域的限制，想要访问时，需要在子组件：

<span> <slot :user="user">  user.lastName </slot> </span>

是的像极了props组件的传值，这个是理解为反向，

父：自定义一个字段slotProps对象接收传过来的插槽prop

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

当只有默认插槽传插槽prop时可以不用另外起一个template标签，在父组件中直接把v-slot:default="slotProps" 写在子组件的应用上

如果不想自定义字段接收插槽prop可以用解构按需引入v-slot=" user "

也能重命名与给定默认值（值为undefined时 ）v-slot=" user: person "  v-slot=" user = firstName: ‘Guest‘ "

动态指令参数也可以用在 v-slot 上，来定义动态的插槽名：这个动态值是在父组件的作用域

<base-layout>

  <template v-slot:[dynamicSlotName]>

    ...

  </template></base-layout>

 

跟 v-on 和 v-bind 一样，v-slot 也有缩写，即把参数之前的所有内容 (v-slot:) 替换为字符 #。例如 v-slot:header 可以被重写为 #header：