专栏首页亦枫的大佬之路Vue中的slot、slot-scope和v-slot

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

一.slot

插槽,也就是slot,是组件的一块HTML模板,这块模板显示不显示、以及怎样显示由父组件来决定。值得注意的是:内容要写在父组件中,然后分给需要的子组件,当slot多个时,可以通过name来加以区分,这就是所谓的具名插槽。

举个例子

父组件:

<template>
    <div>
        <h3>这是父组件</h3>
        <son><span>实践slot</span></son>
        <son>
            <template slot="myslot">
                <div>
                    实践具名slot
                </div>
            </template>
        </son>
    </div>
</template>

子组件:

<template>
    <div>
        <h4>这是子组件</h4>
        <input type="text" placeholder="请输入">
        <slot></slot>
        <slot name="myslot"></slot>
    </div>
</template>

效果:

二.slot-scope

slot-scope就是作用域插槽。官方叫它作用域插槽,实际上,对比具名插槽,我们可以叫它带数据的插槽。具名插槽在组件的template里面写,作用域插槽要求,在slot上面绑定数据。

举个例子

父组件:

<template>
  <div class="father">
    <h3>这里是父组件</h3>
    <!--第一次使用:用flex展示数据-->
    <child>
      <template slot-scope="user">
        <div class="tmpl">
          <span v-for="item in user.data">{{item}}</span>
        </div>
      </template>

    </child>

    <!--第二次使用:用列表展示数据-->
    <child>
      <template slot-scope="user">
        <ul>
          <li v-for="item in user.data">{{item}}</li>
        </ul>
      </template>

    </child>

    <!--第三次使用:直接显示数据-->
    <child>
      <template slot-scope="user">
       {{user.data}}
      </template>

    </child>

    <!--第四次使用:不使用其提供的数据, 作用域插槽退变成匿名插槽-->
    <child>
      我就是模板
    </child>
  </div>
</template>

子组件:

<template>
  <div class="child">

    <h3>这里是子组件</h3>
    // 作用域插槽
    <slot  :data="data"></slot>
  </div>
</template>

 export default {
    data: function(){
      return {
        data: ['zhangsan','lisi','wanwu','zhaoliu','tianqi','xiaoba']
      }
    }
}

效果:

三.v-slot

从 vue2.6 开始,Vue 为具名插槽和作用域插槽引入了一个全新的语法,即v-slot 指令。目的就是想统一 slot 和 scope-slot 语法,使代码更加规范和清晰。 具体使用如下: 1.插槽的名字现在通过 v-slot:slotName 这种形式来使用,如下。

<template v-slot:header> </template>

2.此处需要注意的是, v-slot 只能添加到 上,这点Vue 2.5中的slot是不同的.

<template v-slot:slotName="data"> </template>

3.正常情况下,假设Test组件注册及组件模板如下,

//组件模板
 <template id="test">
        <div>
            <h3>这里是test组件</h3>
            <slot></slot>
        </div>
    </template>
//组件注册
   Vue.component('Test', {
        template: '#test',
        data() {
            return {
                msg: 'Hello World!'
            }
        }
    })

当我们需要在下面的p标签内获取Test组件数据时,可能往往写法如下

 <Test>
            <template v-slot:default>
            <p>{{msg}}</p>
            </template>
</Test>

但是,由于组件的数据只能限于当前组件模板才能使用,所以它访问不了Test组件中的数据,为了解决这个问题,需要给组件模板中的元素上动态绑定一个对象属性,绑定到 元素上的属性我们称之为 slot props。该对象属性的名字可以自定义,而属性值就是Test组件数据的名字,这样就可以获取到Test组件中的数据,如下

   <slot :msg="msg"></slot>

同时使用v-slot重构上面代码。

  <Test>
            <template v-slot:default="data">//此处的data就是在<slot>中绑定的属性slot props
                <p>{{data.msg}}</p>
            </template>
</Test>

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JavaScript中的Promise

    Promise 对象是一个代理对象(代理一个值),被代理的值在Promise对象创建时可能是未知的。它允许你为异步操作的成功和失败分别绑定相应的处理方法(han...

    刘亦枫
  • 可输入文字的div标签

    当我们在标签里面加入了contentEditable属性,这个标签就会变为可编辑状态。

    刘亦枫
  • Vue中的15个最佳做法

    在需要操纵数据时,将key属性与v-for指令一起使用可以让程序保持恒定且可预测。

    刘亦枫
  • 组件插槽

    星辰_大海
  • vue作用域插槽,你真的懂了吗?

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

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

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

    奋飛
  • Vue插槽slot

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

    wade
  • vue 2.6 中 slot 的新用法

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

    前端小智@大迁世界
  • 详解Vue的slot新用法

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

    Fundebug
  • vue组件-template和slot插槽详细介绍

    vue项目,组件应用非常广泛,感觉只要能被多个地方复用的代码,都可以写成组件,这样不用做重复的工作。github上面也有很多大牛制造了n个轮子,方便大家使用。之...

    Javanx

扫码关注云+社区

领取腾讯云代金券