Vue.js 插槽

标签：Vue 作用域插槽 js item 组件

学习目录：

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，父组件可以为这两个插槽提供不同的内容。

总结

Vue.js插槽是一种用于组件化开发的技术，允许您在组件内部定义一个或多个可插入的区域，用于向组件传递内容。插槽可以分为命名插槽和作用域插槽，还具有默认内容、作用域、动态名称和多个名称等特性。掌握Vue.js插槽的使用方法和特性，可以让您更加灵活地开发Vue.js应用程序。

标签：Vue,作用域,插槽,js,item,组件
From： https://blog.51cto.com/u_16123429/6509626