vue 作用域插槽、slot 、v-slot 、slot-scope

vue 插槽slot 和 具名插槽
作用都是在调用组件的时候传递一些DOM结构进去,
不同点是:具名插槽在传递DOM时需要声明,传递给哪个slot的名字 name
他们用法简单不在赘述。

重点说一下作用域插槽 slot-scope 的使用,以及vue2.6.X开始的新语法v-slot

作用域插槽的核心作用是:
子组件给父组件传递数据,当然也包含上述插槽的能力

老版作用域插槽,

slot="test“: 指定插槽的名字用
prop:可以随便定义,表示子组件传递过来的值得对象,可以用解构复制 { row, index }接受

<template slot="test" slot-scope="prop">
   {{ prop.wife.a }}
 </template>

新版是这样的,可以说语法更加清晰
v-slot指令直接跟上插槽名称,prop同上

 <template v-slot:test="prop">
          {{ prop.wife.b }}
        </template>

实例说明

子组件
这里我定义了多个具名插槽,并且用父组件传过来的数据尝试传递回去

<template>
  <div>
    <slot :user="user">
      <!-- 默认显示的值,当父组件使用次作用域插槽时,会被覆盖 -->
      {{ user.age }} 
    </slot>
    <slot name="test" :wife='wife'>
      {{wife.a}}
    </slot>
    <slot name="hasProps" :baseData='baseData'>
      {{baseData.a_count}}
    </slot>
  </div>
</template>
<script>
export default {
  props: {
    baseData: {
      type: Object,
      default: () => {
        return {
          a_count: 0,
          b_count: 0,
          c_count: 0,
          d_count: 0,
          e_count: 0,
          order_amount: 0,
          order_num: 0,
          resource_num: 0
        }
      }
    }
  },
  data () {
    return {
      user: {
        name: '张三',
        age: 20
      },
      wife: {
        a: '小李',
        b: '小韩'
      }
    }
  }
}
</script>



父组件
部分代码:
其中的baseData,为服务端异步返回数据

  <div>
      <child>
        <template v-slot:default="prop">
          {{ prop.user.age }}
        </template>
        <template v-slot:test="prop">
          {{ prop.wife.b }}
        </template>
      </child>
      
      <child>
        <template slot-scope="prop">
          {{ prop.user.name }}
        </template>
        <template slot="test" slot-scope="prop">
          {{ prop.wife.a }}
        </template>
      </child>
      <!-- 尝试解构赋值 -->
      <child :baseData='baseData'>
        <template v-slot:hasProps="{baseData}">
          {{ baseData.a_count }}
        </template>
      </child>
    </div>

效果图:

这两种是先注释掉所有child里面,所有代码的效果,前为接口返回前

在这里插入图片描述
在这里插入图片描述
这两张是不注释,前后图

在这里插入图片描述
在这里插入图片描述

可以看出,
在vue2.6以上两种模式都支持,不过官方说3.0就只支持v-slot指令了,
不使用作用域插槽就会显示默认的值,使用之后就按父组件的来
可以先动态更新数据。

使用过element-ui的同学,只要用过表格,我想现在应该明白作用域插槽有多大的用处了吧

  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值