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

更新时间：2022年09月20日 17:14:54 作者：正在学习前端的渣渣-小方同学

插槽slot可以说在一个Vue项目里面处处都有它的身影，比如我们使用一些UI组件库的时候，我们通常可以使用插槽来自定义我们的内容，这篇文章主要介绍了Vue3中slot插槽使用方式,需要的朋友可以参考下

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滚动到指定位置的多种方式示例详解
当容器有滚动条时,有时需要将指定的内容自动滚动到可视区域,怎么实现呢,下面小编给大家带来了多种方法实现Vue滚动到指定位置,感兴趣的朋友跟随小编一起看看吧
2023-08-08
Vue如何接入hls/m3u8的直播视频详解
项目中有一个需求,需要实现直播功能,后端接口返回的是m3u8数据流,下面这篇文章主要给大家介绍了关于Vue如何接入hls/m3u8直播视频的相关资料,需要的朋友可以参考下
2022-07-07
Vue多页面配置打包性能优化方式(解决加载包太大加载慢问题)
这篇文章主要介绍了Vue多页面配置打包性能优化方式(解决加载包太大加载慢问题)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-01-01
vue项目移动端实现ip输入框问题
这篇文章主要介绍了vue项目移动端实现ip输入框问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-03-03
Vue新一代状态管理工具Pinia的具体使用
本文主要介绍了Vue新一代状态管理工具Pinia的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-07-07
浅析Vue如何巧用computed计算属性
在日常使用Vue开发项目的时候，计算属性computed是一个非常常用的特性，本文就来分享一些使用Vue的computed计算属性时的一些小技巧，希望能够帮助到大家
2023-06-06
vue2项目使用element-ui的el-tabs组件导致浏览器崩溃卡死问题
这篇文章主要介绍了vue2项目使用element-ui的el-tabs组件导致浏览器崩溃卡死问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-07-07
学习vue.js计算属性
这篇文章主要和大家一起学习vue.js的计算属性，分享一些计算属性练习代码,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-12-12
vue实现自定义日期组件功能的实例代码
这篇文章主要介绍了vue自定义日期组件的实现代码，代码简单易懂，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
2018-11-11
vue 解决IOS10低版本白屏的问题
这篇文章主要介绍了vue 解决IOS10低版本白屏的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-11-11