Vue.js 插槽

原创

AuraLife 2023-06-18 21:27:09 博主文章分类：VUE学习 ©著作权

文章标签 插槽 Vue 作用域 文章分类 Vue.js 前端开发 yyds干货盘点

©著作权归作者所有：来自51CTO博客作者AuraLife的原创作品，请联系作者获取转载授权，否则将追究法律责任

学习目录：

Vue.js 简介
Vue.js 实例与数据绑定
Vue.js 计算属性和侦听器
Vue.js 条件渲染和列表渲染
Vue.js 事件处理
Vue.js 表单输入绑定
Vue.js 组件基础
Vue.js 组件通信
Vue.js 插槽
Vue.js 动态组件和异步组件
Vue.js 自定义指令
Vue.js 过渡和动画
Vue.js 混入
Vue.js 自定义事件和 v-model
Vue.js 渲染函数和 JSX
Vue.js 插件
Vue.js 单文件组件
Vue.js Webpack 配置和打包优化
Vue.js Vue Router
Vue.js Vuex
Vue.js 服务端渲染
Vue.js 代码测试和调试
Vue.js 生态系统
Vue.js 最佳实践和性能优化
Vue.js 应用部署和上线

Vue.js插槽（slot）功能是重要的特性之一。本文将为您详细介绍Vue.js插槽的使用方法、类型和特性。

什么是Vue.js插槽？

Vue.js插槽是一种用于组件化开发的技术，它允许您在组件内部定义一个或多个可插入的区域，用于向组件传递内容。插槽的作用类似于HTML中的标签，可以将内容插入到标签内部。

Vue.js插槽可以分为两种类型：

命名插槽

命名插槽是一种具有名称的插槽，它允许您在组件内部为插槽定义一个名称，并在组件的父组件中使用该名称来向插槽传递内容。例如：

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

<!-- 父组件 -->
<template>
  <my-component>
    <template slot="header">
      <h1>这是头部</h1>
    </template>
    <p>这是内容</p>
    <template slot="footer">
      <p>这是底部</p>
    </template>
  </my-component>
</template>

在上面的例子中，<my-component>组件内部定义了三个插槽：一个命名为header，一个未命名，一个命名为footer。在父组件中，使用<template>标签来定义插槽内容，并使用slot属性将内容插入到相应的插槽中。

作用域插槽

作用域插槽是一种允许子组件将数据传递给父组件的插槽。在作用域插槽中，子组件可以将数据作为插槽属性传递给父组件，父组件可以使用该属性来访问数据。例如：

<!-- 子组件 -->
<template>
  <div>
    <slot name="item" v-for="item in items" :item="item"></slot>
  </div>
</template>

<!-- 父组件 -->
<template>
  <my-component>
    <template slot="item" slot-scope="props">
      <h1>{{ props.item.title }}</h1>
      <p>{{ props.item.content }}</p>
    </template>
  </my-component>
</template>

在上面的例子中，<my-component>组件内部定义了一个作用域插槽，用于向父组件传递一个名为item的属性。在父组件中，使用slot-scope属性定义该属性的作用域，然后使用props对象来访问该属性的值。

Vue.js插槽的特性

除了命名插槽和作用域插槽，Vue.js插槽还具有以下特性：

默认插槽内容

如果您在组件中定义了一个未命名的插槽，但在父组件中没有提供插槽内容，则该插槽将渲染为组件中的默认内容。例如：

<!-- 子组件 -->
<template>
  <div>
    <slot>这是默认内容</slot>
  </div>
</template>

<!-- 父组件 -->
<template>
  <my-component></my-component>
</template>

在上面的例子中，<my-component>组件没有提供插槽内容，因此<slot>标签将渲染为默认内容“这是默认内容”。

插槽作用域

作用域插槽还允许您使用具有作用域的插槽内容，即在子组件中定义一个变量，并将其传递给父组件。例如：

<!-- 子组件 -->
<template>
  <div>
    <slot name="item" v-for="item in items" :item="item">
      <p>{{ item.title }}</p>
      <p>{{ item.content }}</p>
    </slot>
  </div>
</template>

<!-- 父组件 -->
<template>
  <my-component>
    <template slot="item" slot-scope="props">
      <h1>{{ props.item.title }}</h1>
      <p>{{ props.item.content }}</p>
      <p>{{ props.index }}</p>
    </template>
  </my-component>
</template>

在上面的例子中，子组件定义了一个作用域插槽<slot>，并在其中定义了一个变量item，然后将item作为属性传递给父组件。在父组件中，使用props对象访问item属性的值，并使用props.index访问item在数组中的索引。

动态插槽名称

您可以使用动态插槽名称来动态地向组件传递内容。例如：

<!-- 子组件 -->
<template>
  <div>
    <slot :name="slotName"></slot>
  </div>
</template>

<!-- 父组件 -->
<template>
  <my-component :slotName="dynamicSlotName">
    <p>这是动态内容</p>
  </my-component>
</template>

在上面的例子中，<my-component>组件使用:slotName属性动态地设置插槽名称，然后在子组件中使用:name属性来接收该名称。

多个插槽名称

您可以在一个插槽中使用多个名称。例如：

<!-- 子组件 -->
<template>
  <div>
    <slot name="left" :item="items.left"></slot>
    <slot name="right" :item="items.right"></slot>
  </div>
</template>

<!-- 父组件 -->
<template>
  <my-component>
    <template slot="left" slot-scope="props">
      <h1>{{ props.item.title }}</h1>
      <p>{{ props.item.content }}</p>
    </template>
    <template slot="right" slot-scope="props">
      <h1>{{ props.item.title }}</h1>
      <p>{{ props.item.content }}</p>
    </template>
  </my-component>
</template>

在上面的例子中，子组件定义了两个命名插槽left和right，父组件可以为这两个插槽提供不同的内容。