作用域插槽slot的使用场景 — vue组件通信系列

时间:2021-2-20 作者:admin

vue 组件的数据通信方式很多,本篇着重讲作用域插槽slot

slot的基本用法,这里不再赘述。
本篇强调的是,怎么通过slot来实现通信。准备来说,是在父组件里显示子组件给slot暴露的数据。

因为vue版本的原因,父组件使用slot的形式不一样,2.6.0以上使用新版本slot,以下则是旧版本。

新版本怎么使用作用域插槽

先写个demo:

父组件:

<template lang="pug">
div
  list-item
    template(v-slot:header="headerData")
      //- { "title": "ListItem的header", "desc": "header描述" }
      div {{headerData}}

    //- v-slot:可以简写为#
    template(#default="defaultData")
      //- { "title": "ListItem的default", "desc": "default描述" }
      div {{defaultData}}

    //- 可以解构使用
    template(v-slot:footer="{title,desc}")
      //- ListItem的footer
      div {{title}}
      //- footer描述
      div {{desc}}
</template>

子组件:

<template lang="pug">
div
  slot(name="header" title="ListItem的header" desc="header描述")
  //- name是default的话,可以省略name属性
  slot(name="default" title="ListItem的default" desc="default描述")
  slot(name="footer" title="ListItem的footer" desc="footer描述")
</template>

总结下:

  • 子组件,在内部将数据以属性的形式放在slot标签上
  • 父组件,通过template(v-slot:header="headerData")获取数据,数据是对象形式的
  • v-slot:可以简写成#
  • 数据可以解构
  • 必须配合template标签

旧版本怎么使用作用域插槽

依旧先写个demo:

父组件:

<template lang="pug">
div
  list-item
    //- { "title": "ListItem的header", "desc": "header描述" }
    div(slot="header" slot-scope="headerData") {{headerData}}
    div(slot="header" slot-scope="headerData") {{headerData}}

    //- slot="default" 可以省略
    //- { "title": "ListItem的default", "desc": "default描述" }
    div(slot-scope="defaultData") {{defaultData}}

    template(slot="footer" slot-scope="{title,desc}")
      div {{title}}
      div {{desc}}
</template>

子组件,没变化

总结下:

  • 子组件,在内部将数据以属性的形式放在slot标签上
  • 父组件,通过div(slot="header" slot-scope="headerData")获取数据,数据是对象形式的
  • 数据可以解构

第三方组件,使用作用域插槽

在使用element-uiel-table的时候,需要使用当前行的数据,就可以借助作用域

<template lang="pug">
el-table(...)
  el-table-column
    template(#default="scope")
      router-link(:to="scope.href") 观看视频
  //- 老版
    el-table-column
      router-link(slot-scope="scope" :to="scope.href") 观看视频
</template>
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。