经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » Vue.js » 查看文章
Vue3中插槽(slot)的全部使用方法
来源:jb51  时间:2022/8/23 9:26:46  对本文有异议

Vue中的插槽相信使用过Vue的小伙伴或多或少的都用过,但是它的所有用法你是否全部理解呢?本篇文章就为大家带来Vue3中插槽的全部用法来帮助大家查漏补缺。

什么是插槽

简单来说就是子组件中的提供给父组件使用的一个坑位,用<slot></slot> 表示,父组件可以在这个坑位中填充任何模板代码。

比如一个最简单插槽例子:

  1. //父组件
  2. <template>
  3. <div>
  4. <Child>Hello Juejin</Child>
  5. </div>
  6. </template>
  7. <script setup lang="ts">
  8. import Child from './Child.vue'
  9. </script>
  10.  
  11. //子组件Child
  12. <template>
  13. <div>
  14. <p>1</p>
  15. <slot />
  16. <p>2</p>
  17. </div>
  18. </template>

子组件中的<slot /> 便是父组件放在子组件标签<Child>之间的内容。当然这之间你可以传入任何代码片段,都会被放到<slot />这个位置。

同样的你也可以在标签<Child>之间放入变量,比如

  1. //父组件
  2. <template>
  3. <div>
  4. <Child>{{ msg }}</Child>
  5. </div>
  6. </template>
  7. <script setup lang="ts">
  8. import { ref } from 'vue'
  9. import Child from './Child.vue'
  10. const msg = ref('Hello Juejin')
  11. </script>

先解释一下后面频繁出现的两个词 插槽插槽内容,防止后面阅读搞混了:

同样的 插槽表示的就是这个msg变量。所以子组件 插槽是可以访问到父组件的数据作用域,而插槽内容是无法访问子组件的数据(即父组件中两个<Child>之间是不能使用子组件中的数据的),这就是所谓的渲染作用域。后面会介绍插槽插槽内容传参的方式

默认内容

在父组件没有提供任何插槽内容的时候,我们是可以为子组件的插槽指定默认内容的,比如

  1. //子组件
  2. <template>
  3. <div>
  4. <slot>我是默认内容</slot>
  5. </div>
  6. </template>
  7.  
  8. //父组件1
  9. <template>
  10. <div>
  11. <Child></Child>
  12. </div>
  13. </template>
  14. <script setup>
  15. import Child from './Child.vue'
  16. </script>
  17.  
  18. //父组件2
  19. <template>
  20. <div>
  21. <Child>Hello Juejin</Child>
  22. </div>
  23. </template>
  24. <script setup>
  25. import Child from './Child.vue'
  26. </script>

此时父组件1展示默认内容

父组件2展示提供的内容

具名插槽

很多时候一个 插槽满足不了我们的需求,我们需要多个 插槽。于是就有了具名插槽,就是具有名字的 插槽。简单来说这个具名插槽的目的就是让一个萝卜一个坑,让它们呆在该呆的位置去。比如带 name 的插槽 <slot name="xx">被称为具名插槽。没有提供 name 的 <slot> 会隐式地命名为“default”。在父组件中可以使用v-slot:xxx(可简写为#xxx) 指令的 <template> 元素将目标插槽的名字传下去匹配对应 插槽。比如

  1. //子组件
  2.  
  3. <template>
  4. <div>
  5. <!-- 大萝卜 -->
  6. <div>
  7. <slot name="bigTurnip"></slot>
  8. </div>
  9. <!-- 小萝卜 -->
  10. <div>
  11. <slot name="smallTurnip"></slot>
  12. </div>
  13. <!-- 中萝卜 -->
  14. <div>
  15. <slot name="midTurnip"></slot>
  16. </div>
  17. </div>
  18. </template>
  19.  
  20. //父组件
  21.  
  22. <template>
  23. <div>
  24. <Child>
  25. <!-- #smallTurnip 为v-slot:smallTurnip缩写 -->
  26. <template #smallTurnip>
  27. 小萝卜
  28. </template>
  29. <template #midTurnip>
  30. 中萝卜
  31. </template>
  32. <template #bigTurnip>
  33. 大萝卜
  34. </template>
  35. </Child>
  36. </div>
  37. </template>
  38. <script setup>
  39. import Child from './Child.vue'
  40. </script>

所以父组件中无需在意顺序,只需要写好模板命好名,它就会自动去到它所对应的位置。

动态插槽名

动态插槽名就是插槽名变成了变量的形式,我们可以随时修改这个变量从而展示不同的效果。它的写法是v-slot:[变量名]或者缩写为#[变量名]

  1. //父组件
  2. <template>
  3. <div>
  4. <Child>
  5. <!-- 等同于#smallTurnip -->
  6. <template #[slotName]>
  7. 小萝卜
  8. </template>
  9. <template #midTurnip>
  10. 中萝卜
  11. </template>
  12. <template #bigTurnip>
  13. 大萝卜
  14. </template>
  15. </Child>
  16. </div>
  17. </template>
  18. <script setup>
  19. import { ref } from 'vue'
  20. import Child from './Child.vue'
  21. const slotName = ref('smallTurnip')
  22. </script>

作用域插槽

作用域插槽

上面说过插槽内容是无法访问子组件的数据的,但是如果我们想在插槽内容访问子组件的状态该怎么办呢?

其实插槽可以像对组件传递 props 那样,在slot标签绑定属性从而传递给父组件中的插槽内容。首先来看下默认插槽的传值方式

  1. //子组件
  2. <template>
  3. <div>
  4. <slot personName="xiaoyue" age="18"></slot>
  5. </div>
  6. </template>
  7.  
  8. //父组件
  9.  
  10. <template>
  11. <div>
  12. <Child v-slot="slotProps">
  13. My name is {{ slotProps.personName }} and I am {{ slotProps.age }} years old this year
  14. </Child>
  15. </div>
  16. </template>
  17. <script setup>
  18. import Child from './Child.vue'
  19. </script>

你还可以以结构的形式获取slot提供的数据

  1. <template>
  2. <div>
  3. <Child v-slot="{ personName, age }">
  4. My name is {{ personName }} and I am {{ age }} years old this year
  5. </Child>
  6. </div>
  7. </template>

注意不能绑定name属性,因为你绑定了name它就成了具名插槽了。同样具名插槽中的name属性也不会传递给插槽内容。因为传递的参数只能在插槽内容中使用,所以这类能够接受参数的插槽就被称为了作用域插槽

具名作用域插槽

下面再看下具名作用域插槽它的传参方式。它接收参数的方式是通过template标签的指令v-slot的值获取的,所以可以缩写成这样

  1. //父组件
  2. <template>
  3. <div>
  4. <Child>
  5. <template #bigTurnip="bigTurnipProps">
  6. {{ bigTurnipProps.message }}
  7. </template>
  8. </Child>
  9. </div>
  10. </template>
  11. <script setup>
  12. import Child from './Child.vue'
  13. </script>
  14.  
  15. //子组件Child.vue
  16.  
  17. <template>
  18. <div>
  19. <!-- 大萝卜 -->
  20. <div>
  21. <slot name="bigTurnip" message="我是萝北"></slot>
  22. </div>
  23. </div>
  24. </template>

这类插槽便是具名作用域插槽

写在最后

到此这篇关于Vue3中插槽(slot)的全部使用方法的文章就介绍到这了,更多相关Vue3插槽slot内容请搜索w3xue以前的文章或继续浏览下面的相关文章希望大家以后多多支持w3xue!

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号