专栏首页三掌柜的技术空间前端开发:插槽(slot)的使用

前端开发:插槽(slot)的使用

在Vue.js开发过程中,插槽的使用也是非常常见的,对于刚入门的新手来说对于这种概念性的知识的认识还是不是太清楚,那么本篇博文就来分享一下关于插槽的使用。

首先要知道插槽的使用场景,插槽一般是在子组件中使用的,其次插槽是为了把父组件中的子组件的数据展示正常的操作。通俗一点的来说,就是组件内部预留一个或者多个的插槽位置,可提供组件传对应的模板代码进去。插槽的使用,让开发者可以拓展组件,去更好的复用组件和对组件做定制化处理,可以让组件变得更加灵活。

Vue官方文档是这样解释插槽的:

Vue 实现了一套内容分发的 API,将 <slot> 元素作为承载分发内容的出口。父组件合成组件定义内容,然后子组件模板自定义设置<slot></slot>,当组件渲染的时候,<slot></slot> 将会被替换为父组件定义的内容。插槽内可以包含任何模板代码,包括 HTML,甚至其它的组件。(如果子组件的 template 中没有包含一个 <slot> 元素,则该组件起始标签和结束标签之间的任何内容都会被抛弃。)

插槽的常用使用分为:匿名插槽和具名插槽、作用域插槽。

1、匿名插槽:就是没有署名的插槽,直接使用;

2、具名插槽:就是带有名字的插槽,如果需要在组件内部预留多个插槽,那就需要为插槽定义名字,指定插入的位置。

3、作用域插槽:就是为了解决父组件在向子组件插槽传递内容的时候存在访问子组件数据的问题,父组件传递的插槽内容是由于子组件编译的,插槽作用域由子组件决定,所以若需要动态修改插槽内容,就需子组件传递参数给父组件。

<slot> 元素有一个特殊的attribute:name属性。这个 attribute 可以用来定义额外的插槽。

具体的使用案例如下所示(这里以具名插槽使用来演示):

1、父组件:

<template>
  <div class="AddTask">
    <CtrlPanel :split-line="true"
               class="bottom-sidebar"
               style="overflow: auto; height: 520px;">
      <template v-slot:title>
        <span class="f16">{{ titleTag }}</span>
        <span class="f16 goBackList"
              @click="goBackList">
          <i class="iconfont iconangle-left"></i>任务列表
        </span>
      </template>
    </CtrlPanel>
  </div>
</template>
<script>
import CtrlPanel from "@/components/CtrlPanel.vue";
export default {
  mixins: [baseMixin],
  components: {
    CtrlPanel
  },
};
</script>
2、子组件:
<template>
  <dl class="ctrl-panel">
    <slot name="title" v-if="hideTitle !== true" v-bind:class="classObject"></slot>
    <slot name="content"></slot>
  </dl>
</template>
<script>
export default {
  name: "CtrlPanel",
  props: {
    splitLine: {
      type: Boolean,
      default: false
    },
    hideTitle: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    classObject: function() {
      return { "split-line": true};
    }
  },
 };
</script>

本文分享自微信公众号 - iOS开发by三掌柜(sanzhanggui777),作者:三掌柜666

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-10-10

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 前端开发:插槽(slot)的使用

    在Vue.js开发过程中,插槽的使用也是非常常见的,对于刚入门的新手来说对于这种概念性的知识的认识还是不是太清楚,那么本篇博文就来分享一下关于插槽的使用。

    三掌柜
  • 前端开发:Vue中双向数据绑定的简单使用

    在Vue.js开发过程中,数据处理是一个很重要的部分,尤其是Vue是一个MVVM的框架,也就是Vue经常谈到的双向数据绑定。双向数据绑定的大概原理就是:当数据发...

    三掌柜
  • Android开发:App点击跳转到网页的实现

    在Android开发过程中,点击App里面的控件进行网页跳转是经常会遇到的需求,但是Android的网页跳转有两种方式实现App点击控件跳转到网页,第一种就是A...

    三掌柜
  • 前端开发:插槽(slot)的使用

    在Vue.js开发过程中,插槽的使用也是非常常见的,对于刚入门的新手来说对于这种概念性的知识的认识还是不是太清楚,那么本篇博文就来分享一下关于插槽的使用。

    三掌柜
  • 组件插槽

    星辰_大海
  • Vue 2.6 全新的slot语法

    2019年大年三十,Vue 2.6发布,其中改动最大的就是slot(插槽),今天为大家分析一下最新版的slot。

    用户1687375
  • 让你的组件千变万化,Vue slot 剖玄析微

    Vue 代码中的 slot 是什么,简单来说就是插槽。<slot> 元素作为组件模板之中的内容分发插槽,传入内容后 <slot> 元素自身将被替换。

    政采云前端团队
  • vue作用域插槽,你真的懂了吗?

    在网上搜了很多关于作用域插槽的解释,感觉没有写得很具体的吧,我认为应该对组件化有很深的理解才会触及到这个问题吧,这里也分享下我自己对于slot-scope的一点...

    Tusi
  • Vue插槽slot

    使用了那么久的vue,到现在才知道vue自带的组件插槽slot,说真的,插槽的作用在一些场景下非常有用。

    wade
  • vue 2.6 中 slot 的新用法

    最近发布不久的Vue 2.6,使用插槽的语法变得更加简洁。 对插槽的这种改变让我对发现插槽的潜在功能感兴趣,以便为我们基于Vue的项目提供可重用性,新功能和更清...

    前端小智@大迁世界

扫码关注云+社区

领取腾讯云代金券