vue插槽的理解和用法

最新推荐文章于 2024-07-26 13:02:41 发布

原创最新推荐文章于 2024-07-26 13:02:41 发布 · 459 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #前端框架 #前端开发

vue学习进阶之路专栏收录该内容

4 篇文章

订阅专栏

本文深入解析Vue中的插槽概念，包括基本插槽、具名插槽、作用域插槽等，通过实例展示如何在父组件与子组件间传递结构与数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

§1.插槽

理解：
插槽是什么东西，其实就vue提供的一个父组件在使用子组件的时候向子组件中传递结构的方法，子组件中的slot就相当于函数的形参，父组件中传递的结构就是实参，调用的结果就是实参代替了形参的内容。、

实例：

<!--父组件-->
<template >
  <div id="app">
    <SlotDemo>
      <template slot="header">
        <p>{{ header }}</p>
      </template>
      <template slot="body">
        <p>{{ body }}</p>
      </template>
      <template slot="footer" slot-scope="slotProps">
        // 作用域插槽（用于向子组件向父组件传递，再由父组件传回）
        // 相当于在一个插槽的作用域对象上挂载了一个属性ht
        <p>{{ slotProps.ht }}</p>
      </template>
    </SlotDemo>
  </div>
</template>

data () {
    return {
      header:'我是脑袋',
      body:'身体',
      footer:'我是脚',
    }
},

<!--子组件-->
<template>
    <div>
        <slot name="header"></slot>
        <slot name="body"></slot>
        <slot name="footer" :ht="footer"></slot>
    </div>
</template>

1.基本插槽：

<slot></slot>

2.具名插槽：为插槽指定名称。必须一一对应

<!--父组件-->
<template slot="header">
    <p>{{ header }}</p>
</template>
<!--子组件-->
<slot name="header"></slot>

3.插槽的默认内容

<slot name="header">{ error }</slot>
当父组件给子组件传递结构时，子组件会使用默认值

4.编译作用域:父组件模板的所有东西都会在父级作用域内编译；子组件模板的所有东西都会在子级作用域内编译。

5.作用域插槽

<!--父组件-->
<template slot="footer" slot-scope="slotProps">
        // 作用域插槽（用于向子组件向父组件传递，再由父组件传回）
        // 相当于在一个插槽的作用域对象上挂载了一个属性ht
    <p>{{ slotProps.ht }}</p>
</template>
<!--子组件     -->
<slot name="footer" :ht="footer"></slot>