VUE3插槽的使用

插槽的用途就和它的名字一样:有一个缺槽,我们可以插入一些东西。

插槽 slot 通常用于两个父子组件之间

基本使用

子组件--Test1

父组件--Test

在子组件使用slot进行占位

具名插槽




上段代码中我们添加了 3 个 slot 插槽,其中两个 slot 标签有一个 name 属性,用于定义每个插槽的名字

上段代码中有一个插槽没有添加 name 属性,这个时候 Vue 会隐式的将这个插槽命名为“default”

slot 有了名字,那么我们在父组件中传入内容时就要和名字关系对应起来,我们采用 v-slot:header 指令的形式找到对应的插槽,需要注意的是该指令需要作用在 template 元素上

v-slot:name 指令也有简写形式 #name

VUE3插槽的使用_第1张图片

动态插槽名

let dynameName = 'header'


  
  

作用域插槽传值



VUE3插槽的使用_第2张图片

VUE3插槽的使用_第3张图片

你可能感兴趣的:(vue.js,前端,javascript)