vue(9)-slot

最新推荐文章于 2025-09-25 16:46:50 发布

原创最新推荐文章于 2025-09-25 16:46:50 发布 · 151 阅读

0 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

21 篇文章

订阅专栏

本文主要介绍了Vue中插槽和作用域插槽的相关知识。插槽是对组件的扩展，可将父组件内容传递到子组件指定位置，内容通常为html等。而作用域插槽能让子组件把数据传给父组件，解决了普通插槽中父组件无法访问子组件数据的问题。

理解

使用

作用域插槽

理解

slot(插槽)是对组件的扩展，父组件的内容指定位置传递子组件；这里父组件的内容一般不同于参数传值而是html、div等，参数传值我们一般用props、bus、vuex等。

使用

父组件：

           <childSlot>
              <p slot="header">我是header</p>
              <p slot="footer">我是footer</p>
            </childSlot>

子组件：

<template>
  <div>
    <slot></slot>
    <slot name="header"  ></slot>
    <slot name="footer"  ></slot>
  </div>
</template>

<script>
export default {
  name: "childSlot",
  data() {
  }
};
</script>

<style lang="less" scoped>
</style>

效果：

作用域插槽

作用域插槽：可以理解为子组件把数据传给父组件，解决了普通slot在parent中无法访问child数据的问题。

子组件：

<template>
  <div>
    <slot></slot>
    <slot name="header" :data="zone"></slot>
    <slot name="footer" :data="city"></slot>
  </div>
</template>

<script>
export default {
  name: "childSlot",
  data() {
    return {
      city: "上海",
      zone: "华东"
    };
  }
};
</script>

<style lang="less" scoped>
</style>

父组件：

           <childSlot>
              <p slot="header" slot-scope="props">{{props.data}}</p>
              <p slot="footer" slot-scope="props">{{props.data}}</p>
            </childSlot>

效果：