Vue插槽

88 阅读2分钟

今天学习了vue的插槽语法,学的时候很困,所以笔记做的比较凌乱。

插槽也算是vue里的一种传值方法。通过它可以由父组件向子组件传数据或者传一个组件

1.png

2.png

插槽只能访问它所在的组件的作用域。插槽是在父组件实例化的时候就已经执行了,所以它只能读取到父组件中的数据。 父组件模板里的所有内容都是在父级作用域中编译的,子组件模板里的所有内容都是在子级作用域中编译的。

后备内容:

就是本来要给子组件传递插值的,但是没传,就可以设置后备内容(也就是默认值),默认值放在<slot>标记之间。设置默认值是在没有提供任何插槽的情况下生效。

具名插槽

  • 出口插槽不写名的话,默认就是default。
  • 入口用<template>把插槽包裹起来,使用v-slot:给插槽起名字,v-slot:这个命令是放在<template>里写入,template只起到了一个分块包裹的作用,它并不会被渲染出来。
  • 子组件接收插槽时,给<slot>添加name属性,值为负组件中<template>组件v-slot:后面的名字
  • 如果子组件里不接slot的话,插槽就会被抛弃,并且插槽在父组件时里有名字,子组件里接收时没有名字,该插槽也会被抛弃。

具名父.png

具名子.png

作用域插槽(其实它也是父获取子组件里内容的一种写法)

  • :在子组件之间写插槽时,需给子组件的<slot>标记写上v-bind:属性名="要传给父组件的数据名"。
  • :父组件需要使用v-slot:default(也可以自己起名字)="slotProps"接收数据,名字slotProps是自己定义的。
  • 这样的话,父组件就可以读取子组件中的数据。
  • 作用域插槽的内部工作原理是将你的插槽内容包裹在一个拥有单个参数的函数里 父.png

子.png

独占默认插槽缩写语法

该方法的意思是有一个默认的插槽,在父组件中改变这个默认插槽,该方法就是作用域插槽的缩写。 当只有一个默认插槽时,可省略default单词,直接写v-slot="slotProps",要注意:默认插槽不能和具名插槽一起使用,如果有多个插槽,就用完整的基于<template>写法。

解构插槽

传过来的myUser是个对象,可以对它直接进行解构赋值 。

v-slot:可以简写成#,如果#后面直接跟=,会在终端直接进行报错,它是具名简写,所以#后面必须得有名,才能接着写"="。