Vue.js的作用域插槽的介绍以及使用场景

这篇文章主要介绍“Vue.js的作用域插槽的介绍以及使用场景”，在日常操作中，相信很多人在Vue.js的作用域插槽的介绍以及使用场景问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”Vue.js的作用域插槽的介绍以及使用场景”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

创新互联建站-专业网站定制、快速模板网站建设、高性价比尼元阳网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式尼元阳网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖尼元阳地区。费用合理售后完善，十多年实体公司更值得信赖。

作用域插槽是 Vue.js 中一个很有用的特性，可以显著提高组件的通用性和可复用性。问题在于，它实在不太好理解。尝试搞清楚父子作用域之间错综复杂的关系，其痛苦程度不亚于求解一个棘手的数学方程。

当你无法理解一个东西的时候，最好的办法就是在解决问题的过程中体会它的应用。本文将向你展示如何使用作用域插槽构建一个可复用的列表组件。

注意: 完整代码可以去 Codepen 查看

最基础的组件

我们即将构建的组件叫做 my-list ，用来展示一系列的项目。它的特别之处就在于，你可以在每次使用组件的时候自定义列表项目的渲染方式。

我们先从最简单的单个列表开始：一个包含几何图形名字和边数的数组。

app.js

Vue.component('my-list', {    template: '#my-list',    data() {      return {        title: 'Shapes',        shapes: [           { name: 'Square', sides: 4 },           { name: 'Hexagon', sides: 6 },           { name: 'Triangle', sides: 3 }        ]      };    }  });  new Vue({    el: '#app'  });

index.html

{{ shape.name }} ({{ shape.sides }} sides)

现在我们想要让 my-list 更加通用，可以渲染任何类型的列表。这次我们展示的是一堆颜色的名字以及对应的颜色方块。

为此，我们需要将上例列表独有的数据进行抽象化。由于列表中的项目可能有不同的结构，我们将会给 my-list 一个插槽，让父组件来定义列表的展示方式。

现在，我们在根实例中创建 my-list 组件的两个实例，分别展示两个测试用例列表：lists:

new Vue({ el: '#app', data: { shapes: [ { name: 'Square', sides: 4 }, { name: 'Hexagon', sides: 6 }, { name: 'Triangle', sides: 3 } ], colors: [ { name: 'Yellow', hex: '#F4D03F', }, { name: 'Green', hex: '#229954' }, { name: 'Purple', hex: '#9B59B6' } ] } });

{{ shape.name }} ({{ shape.sides }} sides)

我们刚才创建的组件确实符合要求，但那段代码算不上很好。my-list 本来应该是一个展示列表的组件，但我们却把渲染列表需要的逻辑部分抽象到了父组件中，这样一来，子组件在这里只不过是用来包裹列表而已，未免显得大材小用了。

更糟糕的是，在两个组件的声明中存在着大量重复代码（例如，

接着我们让 my-list 迭代项目。在 v-for 循环中，item 是当前迭代项目的别名。我们可以创建一个插槽并通过 v-bind="item" 将那个项目绑定到插槽中。

注意：也许你之前没见过不带参数的 v-bind 用法。这种用法将会把整个对象的所以属性都绑定到当前元素上。在涉及作用域插槽时，这种用法很常见，因为绑定的对象可能有很多属性，而一一将它们列举出来并手动绑定显然太麻烦了。

现在，回到根实例这里来，在 my-list 的插槽中声明一个模板。首先看一下几何图形列表（第一个例子中的列表），我们声明的模板必须带有一个 scope 属性，这里将其赋值为 shape。shape 这个别名可以让我们访问作用域插槽。在模板中，我们可以继续沿用最初例子中的标记来展示项目。

{{ shape.name }} ({{ shape.sides }} sides)

虽然用上作用域插槽之后，代码量并未减少，但是我们将通用的功能都交由子组件负责，这显著提高了代码的健壮性。

到此，关于“Vue.js的作用域插槽的介绍以及使用场景”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注创新互联网站，小编会继续努力为大家带来更多实用的文章！

重庆分公司，新征程启航

Vue.js的作用域插槽的介绍以及使用场景

其他资讯