本篇内容主要讲解“Vue3中的插槽怎么使用”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“Vue3中的插槽怎么使用”吧!
成都创新互联公司专注于吉利企业网站建设,自适应网站建设,成都商城网站开发。吉利网站建设公司,为吉利等地区提供建站服务。全流程定制网站开发，专业设计，全程项目跟踪，成都创新互联公司专业和态度为您提供的服务
什么是插槽
简单来说就是子组件中的提供给父组件使用的一个坑位，用
//父组件
Hello Juejin
import Child from './Child.vue'
//子组件Child
子组件中的
同样的你也可以在标签
//父组件
{{ msg }}
import { ref } from 'vue'
import Child from './Child.vue'
const msg = ref('Hello Juejin')
先解释一下后面频繁出现的两个词 插槽和插槽内容，防止后面阅读搞混了：
同样的 插槽表示的就是这个msg变量。所以子组件 插槽是可以访问到父组件的数据作用域，而插槽内容是无法访问子组件的数据（即父组件中两个插槽向插槽内容传参的方式
默认内容
在父组件没有提供任何插槽内容的时候，我们是可以为子组件的插槽指定默认内容的，比如
//子组件
我是默认内容
//父组件1
import Child from './Child.vue'
//父组件2
Hello Juejin
import Child from './Child.vue'
此时父组件1展示默认内容
父组件2展示提供的内容
具名插槽
很多时候一个 插槽满足不了我们的需求，我们需要多个 插槽。于是就有了具名插槽，就是具有名字的 插槽。简单来说这个具名插槽的目的就是让一个萝卜一个坑，让它们呆在该呆的位置去。比如带 name 的插槽 被称为具名插槽。没有提供 name 的 v-slot:xxx（可简写为#xxx） 指令的 插槽。比如
//子组件
//父组件
小萝卜
中萝卜
大萝卜
import Child from './Child.vue'
所以父组件中无需在意顺序，只需要写好模板命好名，它就会自动去到它所对应的位置。
动态插槽名
动态插槽名就是插槽名变成了变量的形式，我们可以随时修改这个变量从而展示不同的效果。它的写法是v-slot:[变量名]或者缩写为#[变量名]。
//父组件
小萝卜
中萝卜
大萝卜
import { ref } from 'vue'
import Child from './Child.vue'
const slotName = ref('smallTurnip')
作用域插槽
作用域插槽
上面说过插槽内容是无法访问子组件的数据的，但是如果我们想在插槽内容访问子组件的状态该怎么办呢？
其实插槽可以像对组件传递 props 那样，在slot标签绑定属性从而传递给父组件中的插槽内容。首先来看下默认插槽的传值方式
//子组件
//父组件
My name is {{ slotProps.personName }} and I am {{ slotProps.age }} years old this year
import Child from './Child.vue'
你还可以以结构的形式获取slot提供的数据
My name is {{ personName }} and I am {{ age }} years old this year
注意不能绑定name属性，因为你绑定了name它就成了具名插槽了。同样具名插槽中的name属性也不会传递给插槽内容。因为传递的参数只能在插槽内容中使用，所以这类能够接受参数的插槽就被称为了作用域插槽。
具名作用域插槽
下面再看下具名作用域插槽它的传参方式。它接收参数的方式是通过template标签的指令v-slot的值获取的，所以可以缩写成这样
//父组件
{{ bigTurnipProps.message }}
import Child from './Child.vue'
//子组件Child.vue
到此，相信大家对“Vue3中的插槽怎么使用”有了更深的了解，不妨来实际操作一番吧！这里是创新互联网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
本文标题：Vue3中的插槽怎么使用
网站路径：
http://kswjz.com/article/phodeh.html
