深入了解Vue.js的作用域插槽

更新日期: 2019-09-24阅读: 1.5k标签: 插槽

作用域槽是vue.js的一个有用特性,它可以使组件更加通用和可重用。唯一的问题是它们很难理解!试着让你的头在父母和孩子的范围内交织,就像解决一个棘手的数学方程。

当你不能很容易地理解某件事时,一个好的方法是试着用它来解决问题。在本文中,我将演示如何使用作用域槽来构建可重用列表组件。


基本组成部分

我们要构建的组件叫做my-list,它显示了很多东西。该特性的特殊之处在于,您可以自定义列表项在每次使用组件时的呈现方式。

让我们首先处理最简单的用例,并获取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

<div id="app">
  <my-list></my-list></div><script type="text/x-template" id="my-list">
  <div>
    <div>{{ title }}</div>
    <div>
      <div v-for="shape in shapes">
        <div>{{ shape.name }} <small>({{ shape.sides }} sides)</small></div>
      </div>
    </div>
  </div>
</script>


泛化my-list

现在,我们想要使my-list功能足够多,以呈现任何类型的列表。第二个测试用例将是一个颜色列表,包括一个小样本来显示颜色。

为此,我们必须抽象特定于形状列表的任何数据。由于列表中的项的结构可能不同,我们将为my-list提供一个插槽,以便父列表可以定义任何特定列表的显示方式。

app.js

Vue.component('my-list', {
  template: '#my-list',
  props: [ 'title' ]
});

index.html

<script type="text/x-template" id="my-list">
  <div>
    <div>{{ title }}</div>
    <div>
      <slot></slot>
    </div>
  </div>
</script>

现在让我们在根实例中创建my-list组件的两个实例来显示我们的两个测试用例列表:

app.js

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' }
    ]
  }
});
<div id="app">
  <my-list :title="Shapes">
    <div v-for="item in shapes">
      <div>{{ shape.name }} <small>({{ shape.sides }} sides)</small></div>
    </div>
  </my-list>
  <my-list :title="Colors">
    <div v-for="color in colors">
      <div>
        <div :></div>
        {{ color.name }}      </div>
    </div>
  </my-list></div>

表面成分

我们刚刚创建的代码工作得很好,但是代码并不好。my-list是按名称显示列表的组件。但是我们已经抽象了所有将列表呈现到父列表中的逻辑。组件只是用一些表示标记将列表包装起来。

考虑到组件的两个声明中仍然有重复的代码(例如<div v-for="item in…"

作用域的插槽

为了实现这一点,我们将使用作用域槽而不是常规槽。作用域插槽允许您将模板传递给插槽,而不是传递呈现的元素。它被称为“作用域”槽,因为尽管模板是在父作用域中呈现的,但它可以访问特定的子数据。

例如,具有作用域插槽的组件子组件可能如下所示。

<div>
  <slot my-prop="Hello from child"></slot>
</div>

使用此组件的父组件将在槽中声明模板元素。此模板元素将具有一个属性范围,该范围指定别名对象。添加到slot(在子模板中)的任何道具都可以作为别名对象的属性使用。

<child>
  <template scope="props">
    <span>Hello from parent</span>
    <span>{{ props.my-prop }}</span>
  </template>
</child>

显示为:

<div>
  <span>Hello from parent</span>
  <span>Hello from child</span>
</div>

在my-list中使用作用域插槽

让我们将列表数组作为道具传递给my-list。然后我们可以用作用域插槽替换插槽。这样my-list就可以负责迭代列表项,但是父级仍然可以定义每个列表项应该如何显示。

index.html

<div id="app">
  <my-list title="Shapes" :items="shapes">
    <!--template will go here-->
  </my-list>
  <my-list title="Colors" :items="colors">
    <!--template will go here-->
  </my-list>   
</div>

现在我们得到my-list来迭代这些项。在v-for循环中,item是当前列表项的别名。我们可以创建一个槽,并使用v-bind="item"将该列表项绑定到槽。

app.js

Vue.component('my-list', {
  template: '#my-list',
  props: [ 'title', 'items' ]
});

index.html

<script type="text/x-template" id="my-list">
  <div>
    <div>{{ title }}</div>
    <div>
      <div v-for="item in items">
        <slot v-bind="item"></slot>
      </div>
    </div>
  </div>
</script>

注意:如果您以前没有见过v-bind在没有参数的情况下使用,这将把整个对象的属性绑定到元素。这对于作用域插槽非常有用,因为您绑定的对象通常具有任意属性,现在不需要通过名称指定这些属性。

现在我们将返回到根实例,并在my-list的slot中声明一个模板。首先查看形状列表,模板必须包含我们为其分配别名形状的scope属性。这个别名允许我们访问限定范围的道具。在模板内部,我们可以使用与以前完全相同的标记来显示形状列表项。

<my-list title="Shapes" :items="shapes">
  <template scope="shape">
    <div>{{ shape.name }} <small>({{ shape.sides }} sides)</small></div>
  </template>
</my-list>

下面是完整的模板:

<div id="app">
  <my-list title="Shapes" :items="shapes">
    <template scope="shape">
      <div>{{ shape.name }} <small>({{ shape.sides }} sides)</small></div>
    </template>
  </my-list>
  <my-list title="Colors" :items="colors">
    <template scope="color">
      <div>
        <div :></div>
        {{ color.name }}
      </div>
    </template>
  </my-list>   
</div>


结论

尽管这种方法和以前一样有很多标记,但它将公共功能委托给了组件,从而实现了更健壮的设计。

链接: https://www.fly63.com/article/detial/8399

Vue 技能进阶:使用设计模式写出优雅的前端代码

本文针对 Vue 中如何控制组件子树之外的东西,探讨了四种解决方案,并展示了每种解决方案的优缺点。希望读者能从中受到启发。问你个问题,以前你可能从来没想过:有没有办法从子组件填充父组件插槽?

vue插槽slot和slot-scope

插槽我对他的理解就是父组件的东西插到子组件的<slot></slot>里面,也不知道这样理解对不对,方便自己记忆;作用域插槽我对他的理解就是数据在子组件里面,父组件可以用

一个案例搞懂 Vue.js 的作用域插槽

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

Vue.js 中的无渲染行为插槽

在本文中我们讨论 Vue 中的无渲染插槽模式能够帮助解决哪些问题。在 Vue.js 2.3.0 中引入的作用域插槽显著提高了组件的可重用性。无渲染组件模式应运而生,解决了提供可重用行为和可插入表示的问题。

vue具名插槽、作用域插槽的新写法

有时让插槽内容能够访问子组件中才有的数据是很有用的。但是由于子组件的作用域在子组件,而父组件的作用域在父组件,这样一来,父组件就访问不到子组件的信息了,但是我们又不想用$emit发送事件去传递信息

Vue 2.60 中, 插槽新增的v-slot

注意v-slot只能添加在<template>上(只有一种例外情况),这一点和已经废弃的slotattribute不同。有时让插槽内容能够访问子组件中才有的数据是很有用的。例如,设想一个带有如下模板的<current-user>组件:

如何通过带有Vue插槽的组件传递HTML内容

这篇文章将向您介绍如何使用Vue插槽在Vue.js中将数据从父组件传递到子组件。这篇文章适合所有阶段的开发人员(包括初学者)。

如何使用Vue中的嵌套插槽(包括作用域插槽)

最近我弄清楚了如何递归地实现嵌套插槽,包括如何使用作用域插槽来实现。起因是我想看看是否可以构建一个复制v-for指令但仅使用template组件。

在Vue中,如何从插槽中发出数据

我们知道使用作用域插槽可以将数据传递到插槽中,但是如何从插槽传回来呢?将一个方法传递到我们的插槽中,然后在插槽中调用该方法。 我信无法发出事件

vue中插槽slot的使用

官方解释:Vue 实现了一套内容分发的 API,将 <slot> 元素作为承载分发内容的出口。插槽就是子组件中的提供给父组件使用的一个占位符

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!