Vue插槽slot

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

插槽分为单个插槽、具名插槽、作用域插槽。其中作用域插槽会稍显复杂。

单个插槽:

子组件testSlot.vue:

<template>
  <div class="">
    <p>子组件共有的</p>
    <slot></slot>
    <p>子组件共有的</p>
  </div>
</template>

父组件:

引入import sonSlot from"./testSlot";

注册:components: {sonSlot}

父组件使用:

<sonSlot>
  <p>我是父组件内容,会替换子组件slot插槽的内容</p>
  <span>测试多个父组件内容怎么替换子组件slot插槽内容</span>
</sonSlot>

效果:

具名插槽:

子组件testSlot.vue:

<template>
  <div class="">
    <p>子组件共有的</p>
    <slot></slot>
    <slot name="one"></slot>
    <slotname="two"></slot>
    <p>子组件共有的</p>
  </div>
</template>

父组件:

引入import sonSlot from"./testSlot";

注册:components: {sonSlot}

父组件使用:

<sonSlot>
  <p>我是父组件内容,会替换子组件slot插槽的内容</p>
  <span>测试多个父组件内容怎么替换子组件slot插槽内容</span>
  <p slot="one">我是父组件,会替换插槽name为one的内容</p>
  <p slot="two">我是父组件,会替换插槽name为two的内容</p>
</sonSlot>

效果:

作用域插槽:简单理解就是子组件传递数据给父组件

子组件testSlot.vue:

<template>
  <div class="">
    <slot:test="test"></slot>
    <slot name="one":one="slotOne"></slot>
  </div>
</template>
data() {
  return {
    test: '我是子组件test数据',
    slotOne: '我是子组件slotOne数据'
  }
}

父组件:

引入import sonSlot from"./testSlot";

注册:components: {sonSlot}

父组件使用:

<sonSlot>
  <pslot-scope="tt">{{tt.test}}</p>
  <p slot="one"slot-scope="slotOne">我是父组件,插槽name为one的内容{{slotOne.one}}</p>
</sonSlot>

效果:

作用域插槽传递数据跟父组件传递给子组件差不多。

(完)

本文分享自微信公众号 - coding个人笔记(gh_2ce38b49dae1),作者:wade

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

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

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vue父子组件通信

    Vue开发,父子组件之间通信很常用,有传数据的,有调用方法的,有子组件操作父组件,也有父组件操作子组件,今天就简单说一下几个父子组件之间通信的方法。

    wade
  • Vue组件之间传值

    这个方法应该是最常用的,父组件通过bind指令传给子组件,子组件通过跟data同级的props数组接收。

    wade
  • Vuex使用场景

    最近本着学习的心态,拉取了公司大佬最新架构的vue项目好好研究一番。然而在vuex的使用上本人出现了很大的歧义。到底什么场景使用vuex?于是搜集了一些资料,但...

    wade
  • Vue中的slot、slot-scope和v-slot

    插槽,也就是slot,是组件的一块HTML模板,这块模板显示不显示、以及怎样显示由父组件来决定。值得注意的是:内容要写在父组件中,然后分给需要的子组件,当slo...

    刘亦枫
  • vue作用域插槽,你真的懂了吗?

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

    Tusi
  • 小程序开发实战(8):可与其他组件绑定的文本组件(label)

    可能有很多读者认为label和text差不多,都是用来显示文本的。其实label和text一点都不像,label本身也不能显示任何文本,该组件只是与其他组件进行...

    蒙娜丽宁
  • 前端开发:插槽(slot)的使用

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

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

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

    三掌柜
  • React Suspense

    前端应用达到一定规模时(比如bundle size以MB为单位),势必面临代码拆分的强需求:

    ayqy贾杰
  • Vue基础:组件--slot、异步组件、递归组件及其他

    为了让组件可以组合,我们需要一种方式来混合父组件的内容与子组件自己的模板。这个过程被称为内容分发。Vue中使用特殊的 <slot> 元素作为原始内容的插槽。

    奋飛

扫码关注云+社区

领取腾讯云代金券