Vue插槽原理与用法详解

来源：动视网责编：小采时间：2020-11-27 22:00:32

Vue插槽原理与用法详解

Vue插槽原理与用法详解:本文实例讲述了Vue插槽原理与用法。分享给大家供大家参考，具体如下： 1 插槽内容 Vue 实现了一套内容分发的 API，这套 API 基于当前的 Web Components 规范草案，将 <slot> 元素作为承载分发内容的出口。它允许你像这样合成组件： <div

推荐度：

点击下载本文 文档为doc格式

导读Vue插槽原理与用法详解:本文实例讲述了Vue插槽原理与用法。分享给大家供大家参考，具体如下： 1 插槽内容 Vue 实现了一套内容分发的 API，这套 API 基于当前的 Web Components 规范草案，将 <slot> 元素作为承载分发内容的出口。它允许你像这样合成组件： <div

5 作用域插槽

2.1.0+ 新增

有的时候你希望提供的组件带有一个可从子组件获取数据的可复用的插槽。例如一个简单的 <todo-list> 组件的模板可能包含了如下代码：

Vue.component('todo-list',{
 template:`
 <ul>
 <li
 v-for="todo in todos"
 v-bind:key="todo.id">
 {{ todo.text }}
 </li>
 </ul>
 `
 });

但是在我们应用的某些部分，我们希望每个独立的待办项渲染出和 todo.text 不太一样的东西。这也是作用域插槽的用武之地。

为了让这个特性成为可能，你需要做的全部事情就是将待办项内容包裹在一个 <slot> 元素上，然后将所有和其上下文相关的数据传递给这个插槽：在这个例子中，这个数据是 todo 对象：

<ul>
 <li
 v-for="todo in todos"
 v-bind:key="todo.id"
 >
 <!-- 我们为每个 todo 准备了一个插槽，-->
 <!-- 将 `todo` 对象作为一个插槽的 prop 传入。-->
 <slot v-bind:todo="todo">
 <!-- 回退的内容 -->
 {{ todo.text }}
 </slot>
 </li>
</ul>

现在当我们使用 <todo-list> 组件的时候，我们可以选择为待办项定义一个不一样的<template> 作为替代方案，并且可以通过 slot-scope 特性从子组件获取数据：

<todo-list v-bind:todos="todos">
 <!--插槽作用域的名字是 slotProps-->
 <template slot-scope="slotProps">
 <!-- 为指定的待办项定义一个模板-->
 <span v-if="slotProps.todo.isComplete">✓</span>
 {{ slotProps.todo.text }}
 </template>
</todo-list>

在 2.5.0+，slot-scope 不再限制在 <template> 元素上使用，而可以用在插槽内的任何元素或组件上。

解构 slot-scope

如果一个 JavaScript 表达式在一个函数定义的参数位置有效，那么这个表达式实际上就可以被 slot-scope 接受。也就是说你可以在支持的环境下单文件组件或现代浏览器)，在这些表达式中使用 ES2015 解构语法。例如：

<todo-list v-bind:todos="todos">
 <template slot-scope="{ todo }">
 <span v-if="todo.isComplete">✓</span>
 {{ todo.text }}
 </template>
</todo-list>

这会使作用域插槽变得更干净一些。

希望本文所述对大家vue.js程序设计有所帮助。

Vue插槽原理与用法详解

推荐度：

点击下载本文 文档为doc格式

标签：使用 VUE 插槽

热门焦点

Vue插槽原理与用法详解

Vue插槽原理与用法详解

Vue插槽原理与用法详解

最新推荐

猜你喜欢

热门推荐