Vue中slot插槽作用与原理详解

 更新时间:2022年09月20日 17:14:54   作者:正在学习前端的渣渣-小方同学  
插槽slot可以说在一个Vue项目里面处处都有它的身影,比如我们使用一些UI组件库的时候,我们通常可以使用插槽来自定义我们的内容,这篇文章主要介绍了Vue3中slot插槽使用方式,需要的朋友可以参考下
(福利推荐:【腾讯云】服务器最新限时优惠活动,云服务器1核2G仅99元/年、2核4G仅768元/3年,立即抢购>>>:9i0i.cn/qcloud

(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun

1、作用

  • 父组件向子组件传递内容
  • 扩展、复用、定制组件

2、插槽内心

2.1、默认插槽

把父组件中的数组,显示在子组件中,子组件通过一个slot插槽标签显示父组件中的数据。

子组件

<template>
  <div class="slotChild">
    <h4>{{msg}}</h4>
    <slot>这是子组件插槽默认的值</slot>
  </div>
</template>
<script>
export default {
  name: "slotChild",
  data() {
    return {
      msg: "vue中的插槽---子组件"
    }
  }
}
</script>

父组件

<template>
  <div class="slotStudy">
    <h1>{{ msg }}</h1>
    <SlotChild>
      <p>这是父组件传入的值,将会替换子组件中slot中编写的默认值</p>
    </SlotChild>
  </div>
</template>
<script>
import SlotChild from "@/components/slot/SlotChild";
export default {
  name: "slotStudy",
  components: {SlotChild},
  data() {
    return {
      msg: "vue中的插槽---父组件"
    }
  }
}
</script>

    <SlotChild></SlotChild>

2.2、具名插槽(命名插槽)

父组件中通过slot属性,给插槽命名,在子组件中通过slot标签,根据定义好的名字填充到对应的位置。这样就可以指定多个可区分的slot,在使用组件时灵活的进行插值。

子组件:

<template>
  <div class="slotChild">
    <h4>{{msg}}</h4>
    <h1><slot name="h_1"></slot></h1>
    <h2><slot name="h_2"></slot></h2>
    <h3><slot name="h_3"></slot></h3>
  </div>
</template>
<script>
export default {
  name: "slotChild",
  data() {
    return {
      msg: "vue中的插槽---子组件"
    }
  }
}
</script>

父组件:

<template>
  <div class="slotStudy">
    <h1>{{ msg }}</h1>
    <SlotChild>
      <template v-slot:h_1>h1111111111的内容</template>
      <!--      #简写-->
      <template #h_2>h2222222的内容</template>
      <template v-slot:h_3>h33333的内容</template>
    </SlotChild>
  </div>
</template>
<script>
import SlotChild from "@/components/slot/SlotChild";
export default {
  name: "slotStudy",
  components: {SlotChild},
  data() {
    return {
      msg: "vue中的插槽---父组件"
    }
  }
}
</script>

2.3、作用域插槽

用得不多。

将子组件中data的数据传出,在父组件中使用。子组件渲染作用域插槽时,可以将子组件内部的数据传递给父组件,让父组件根据子组件的传递过来的数据决定如何渲染该插槽。在标签中通过v-slot="要传过来的数据"来接收数据。

实现原理

实现原理:当子组件vm实例化时,获取到父组件传入的slot标签的内容,存放在vm. s l o t 中,默认插槽为 v m . slot中,默认插槽为vm. slot中,默认插槽为vm.slot.default,具名插槽为vm. s l o t . x x x , x x x 为插槽名,当组件执行渲染函数时候,遇到 s l o t 标签,使用 slot.xxx,xxx 为插槽名,当组件执行渲染函数时候,遇到slot标签,使用 slot.xxx,xxx为插槽名,当组件执行渲染函数时候,遇到slot标签,使用slot中的内容进行替换,此时可以为插槽传递数据,若存在数据,则可称该插槽为作用域插槽。

子组件:

<template>
  <div class="slotChild">
    <h4>{{ msg }}</h4>
    <h1>
      <slot :str="strDate" name="n_str">{{ strDate.name }}</slot>
    </h1>
    <h2>
      <slot :str="strDate" name="j_str">{{ strDate.job }}</slot>
    </h2>
  </div>
</template>
<script>
export default {
  name: "slotChild",
  data() {
    return {
      msg: "vue中的插槽---子组件",
      strDate: {
        name: "学习前端的小方同学",
        job: "找工作中",
        age:"我每年都是18"
      }
    }
  }
}
</script>

父组件:

<template>
  <div class="slotStudy">
    <h1>{{ msg }}</h1>
    <SlotChild>
      <template #n_str="strProps">
        {{ strProps.str.job }}
      </template>
      <template v-slot:j_str="strProps">
        {{ strProps.str.age }}
      </template>
    </SlotChild>
  </div>
</template>
<script>
import SlotChild from "@/components/slot/SlotChild";
export default {
  name: "slotStudy",
  components: {SlotChild},
  data() {
    return {
      msg: "vue中的插槽---父组件"
    }
  }
}
</script>

到此这篇关于Vue中slot插槽作用与原理详解的文章就介绍到这了,更多相关Vue slot插槽内容请搜索程序员之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持程序员之家!

相关文章

  • 解决vue-cli项目开发运行时内存暴涨卡死电脑问题

    解决vue-cli项目开发运行时内存暴涨卡死电脑问题

    最近开发一个vue项目时遇到电脑卡死问题,突然间系统就非常卡,然后卡着卡着就死机了,鼠标也动不了了,只能冷启动。这篇文章主要介绍了vue-cli项目开发运行时内存暴涨卡死电脑问题,需要的朋友可以参考下
    2019-10-10
  • 解决vue.js提交数组时出现数组下标的问题

    解决vue.js提交数组时出现数组下标的问题

    今天小编就为大家分享一篇解决vue.js提交数组时出现数组下标的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • vuex页面刷新数据丢失问题的四种解决方式

    vuex页面刷新数据丢失问题的四种解决方式

    vuex是大家使用vue时大多数都会选择的,但是当页面刷新之后vuex数据会丢失,下面这篇文章主要给大家介绍了关于vuex页面刷新数据丢失问题的四种解决方式,需要的朋友可以参考下
    2022-02-02
  • 如何封装Vue Element的table表格组件

    如何封装Vue Element的table表格组件

    这篇文章主要介绍了如何封装Vue Element的table表格组件,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下
    2021-02-02
  • vue路由结构可设一层方便动态添加路由操作

    vue路由结构可设一层方便动态添加路由操作

    这篇文章主要介绍了vue路由结构可设一层方便动态添加路由操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • vue项目搭建以及全家桶的使用详细教程(小结)

    vue项目搭建以及全家桶的使用详细教程(小结)

    这篇文章主要介绍了vue项目搭建以及全家桶的使用详细教程(小结),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • Vue 微信端扫描二维码苹果端却只能保存图片问题(解决方法)

    Vue 微信端扫描二维码苹果端却只能保存图片问题(解决方法)

    这几天在做项目时遇到微信扫描二维码的然后进入公众号网页巴拉巴拉的,然后就很顺利的遇到了在安卓端扫码的时候,顺利的一塌糊涂,然后到了苹果端的时候,就只能出现一个保存图片,然后就写一下记录一下这问题的解决方法
    2020-01-01
  • 解决antd datepicker 获取时间默认少8个小时的问题

    解决antd datepicker 获取时间默认少8个小时的问题

    这篇文章主要介绍了解决antd datepicker 获取时间默认少8个小时的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10
  • 关于vue3?option?api新玩法分享

    关于vue3?option?api新玩法分享

    vue3新特性中最重要、内容最多的组合式api,组合式api既可以解决之前vue2开发的痛点,又提升了性能,下面这篇文章主要给大家介绍了关于vue3?option?api新玩法的相关资料,需要的朋友可以参考下
    2022-06-06
  • Vue 创建组件的两种方法小结(必看)

    Vue 创建组件的两种方法小结(必看)

    Vue 创建组件的方法有哪些呢?下面小编就为大家分享一篇Vue 创建组件的两种方法小结,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02

最新评论


http://www.vxiaotou.com