专栏首页地方网络工作室的专栏vue3.0 Composition API 上手初体验 vue组件的具名插槽 slot 的变化

vue3.0 Composition API 上手初体验 vue组件的具名插槽 slot 的变化

vue3.0 Composition API 上手初体验 vue组件的具名插槽 slot 的变化

在我讲 vue 3.0 的普通组件的内容里,我提到了具名插槽发生了变化,我当时不清楚新的如何使用。今天查看了一些资料,终于搞明白了。

搞一个带具名插槽的子组件

直接撸代码:

<template>
  <table>
    <tr>
      <th>默认插槽:</th>
      <td><slot /></td>
    </tr>
    <tr>
      <th>具名插槽:</th>
      <td><slot name="footer" /></td>
    </tr>
  </table>
</template>

从代码中可以看到,我使用了 <slot /> 来调用默认的插槽。同时,也使用了 <slot name="footer" /> 来展示具名插槽

vue 2.0 的具名插槽父组件的调用方法

<template>
  <Child>
    这些文字将显示在组件默认插槽内
    <template slot="footer">
      这里的文字会显示在组件的具名插槽内
    </template>
  </Child>
</template>
<script>
import Child from '@/components/child.vue'
export default {
  components: { Child }
}
</script>

如上,我们可以使用 <template slot="footer"> 往具名插槽里面填充内容。但是,在 vue 3.0 里面,这种写法是不被支持的。

vue 3.0 的具名插槽父组件的调用方法

<template>
  <Child>
    这些文字将显示在组件默认插槽内
    <template v-slot:footer>
      这里的文字会显示在组件的具名插槽内
    </template>
  </Child>
</template>
<script>
import Child from '@/components/child.vue'
export default {
  components: { Child }
}
</script>

好的,我们可以看到,原有的语法已经更换为了 <template v-slot:footer>,其它的内容没有变化。在浏览器中的效果如下图所示:

这也是语法糖搞多了之后不可避免的问题。作为开发人员,我们哪有那么多时间去翻看这些文档,查看这些语法糖又怎么更新了呢?当然,vue 的文档还是做得很好的。

具名插槽的传值

在原有的语法里面,可以通过 slot-scope 来接收子组件的传值,典型的应用可以参考 element-uiTable 组件,官方演示如下图所示:

但是在 vue 3.0 中,这个写法已经被废弃了,更换为新的写法。我们重写我们的子组件代码如下:

<template>
  <table>
    <tr>
      <th>默认插槽:</th>
      <td><slot /></td>
    </tr>
    <tr>
      <th>具名插槽:</th>
      <td><slot name="footer" /></td>
    </tr>
    <tr>
      <th>传参插槽:</th>
      <td><slot name="bottom" :color="color" /></td>
    </tr>
    <tr>
      <th>传对象参插槽:</th>
      <td><slot name="object" v-bind="{ old, name }" /></td>
    </tr>
  </table>
</template>
<script>
export default {
  setup () {
    return {
      color: 'red',
      old: 34,
      name: 'FungLeo'
    }
  }
}
</script>

然后我们的父组件改成

<template>
  <Child>
    这些文字将显示在组件默认插槽内
    <template v-slot:footer>
      这里的文字会显示在组件的具名插槽内
    </template>
    <template v-slot:bottom="scope">
      文字右边会有个颜色值 >>> {{scope.color}}
    </template>
    <template v-slot:object="scope">
      文字右边会有多个数据 >>> 名字:{{scope.name}},年龄:{{scope.old}}
    </template>
  </Child>
</template>
<script>
import Child from '@/components/child.vue'
export default {
  components: { Child }
}
</script>

可以看到,我们的父组件获取子组件传值,可以通过 v-slot 的自定义命名值来获取对象数据。

而子组件给父组件传值,如果是传单个值,可以用 :color="color" 这样的语法来进行传值。如果要传多个数据,则可以使用 v-bind 来传一个对象出去。

刚刚尝试了一下,v-bind 可以缩写成 : 也就是说,上面的代码可以写成 <slot name="object" :="{ old, name }" /> ,但是我个人不推荐这样写,有点懵逼。

不过这种插槽传值在实际开发中的应用较少,大家只要知道有这种用法就可以了。具体什么应用场景,只有你自己遇到了实际的需求你才会知道。

好的,有关 vue 3.0 插槽的部分,我就讲完了,相关的代码,我会推到 github 仓库中,大家可以下载查看。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • React + webpack 开发单页面应用简明中文文档教程(九)子组件给父组件传值

    版权声明:本文为 FengCms FungLeo 原创文章,允许转载,但转载必须注明出处并附带首发链接 ...

    FungLeo
  • Vue 脱坑记 - 查漏补缺(汇总下群里高频询问的xxx及给出不靠谱的解决方案)

    使用 nrm 模块 : www.npmjs.com/package/nrm npm config : npm config set registry htt...

    FungLeo
  • React + webpack 开发单页面应用简明中文文档教程(六)渲染一个列表,初识 jsx 文件

    版权声明:本文为 FengCms FungLeo 原创文章,允许转载,但转载必须注明出处并附带首发链接 ...

    FungLeo
  • Golang Leetcode 540. Single Element in a Sorted Array.go

    版权声明:原创勿转 https://blog.csdn.net/anakinsun/article/details/89211328

    anakinsun
  • Reddit大热,伯克利PPT带你丝滑入门机器学习:知识点全面覆盖,笔记可搭配食用

    这份PPT来自伯克利CS 189/289课程,从线性代数复习,到线性回归、随机森林、Boosting……各种方法与其中的知识要点全面覆盖,简洁明晰。

    量子位
  • web移动端适配方案实践

    移动端web页面的开发适配一直是前端开发津津乐道的话题,在实际开发过程中,移动端和PC端web页面的差异不仅仅体现在设备宽度的不同。由于项目历史背景的原因,下文...

    CS逍遥剑仙
  • Facebook发布全新JavaScript引擎:Hermes

    Facebook在Chain React 2019 大会上发布的一个崭新JavaScript引擎

    Fundebug
  • web移动端适配方案实践

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

    csxiaoyao
  • 注意map<> 的[]

    其实在之前一篇关于map的基本操作中已经提到过注意[]操作,这里再强调一下。 先看下面的程序: #include<iostream> #include<map>...

    用户1215536
  • Q1 Two Sum

    Given an array of integers, return indices of the two numbers such that they add...

    echobingo

扫码关注云+社区

领取腾讯云代金券