VueJS 中的作用域插槽到底是什么? [英] What exactly is scoped slot in VueJS?

问题描述

我试图弄清楚作用域插槽的定义，但是在 VueJS 文档 他们本身并没有给出定义，而是尝试通过示例来解释它.所以我的问题是作用域插槽到底是什么?那只是普通的插槽，它具有从组件传递给它的插槽道具吗?

I am trying to figure out the definition of the scoped slots, but in VueJS docs they do not give definition per-se, but rather try to explain it by example. So my question is what exactly is scoped slot? Is that just ordinary slot that has slot props passed to it from the component?

此外，还有作用域插槽".与命名槽"互斥.换句话说，我们能不能有一个既是命名又是作用域的插槽，例如.命名的作用域槽"?

Also, are "scoped slots" mutually exclusive with "named slots". In other words, can we have slot that is both named and scoped, eg. "named scoped slot"?

此外，我还有一个相关的问题.在编写代码时，当我们说插槽"时，我们究竟指的是什么?是术语槽"吗?意味着是组件模板中的实际 <slot></slot> 标记(例如，让我们调用定义此模板 navigation-link 的组件)，如下所示:

In addition I have one more related question. When writing code, on what thing exactly we mean when we say "slot"? Is term "slot" meant to be the actual <slot></slot> tag in component's template (eg. let's call component that defines this template navigation-link) like here:

<template>
    <a v-bind:href="url">
      <slot></slot> // is this "slot"?
    </a>
</template>

或者是术语槽"；我们在使用这个 navigation-link 时放入父组件的实际 HTML 内容如下:

Or is term "slot" the actual HTML content we put in parent component when using this navigation-link like this:

<navigation-link url="/profile">
    <span class="link-text">Your Profile</span>  // or is this HTML content what we call a "slot"?
</navigation-link>

推荐答案

1. 当我们说slot"时，我们究竟是什么意思?

<slot></slot> - 因为通过这个组件声明这是父级可以放置它自己的内容的地方(也是默认内容)".父母对应的正确名称可能是插槽内容"

<slot></slot> - because by this the component declares "this is the place (and it's default content) where parent can place it's own content". Correct name for parent's counterpart is probably "slot content"

1. 什么是插槽?

Slot 是一种结构，它允许组件的某些部分内容被父组件定义/替换...

Slot is a construct that allows some part of the component's content to be defined/replaced by the parent component...

1. 普通槽

接收完全静态或仅依赖于父级数据的内容的槽.

The slot that receives content that is completely static or only depends on the data of the parent.

从组件的角度来看，就像接收静态HTML(Vue中的VNode数组)

From the component's point of view, it is like receiving static HTML (array of VNodes in Vue)

1. 作用域槽

接收可以完全静态的内容的插槽，使用父级的数据或某些组件的内部数据生成(组件决定哪些数据可用)

Slot that receives the content which can be completely static, generated using parent's data or some component's internal data (components decides which data makes available)

从父级传递的内容不是静态的.它是编译父模板时创建的函数.当组件(定义插槽的位置)正在渲染时，它将调用该函数，向其传递一些数据(该组件内部的)并且该函数返回一些 HTML(同样，VNodes 的数组Vue)

Content passed from the parent is not static. It is a function created when parent's template is compiled. When the component (where the slot is defined) is rendering, it will call that function, pass it some data (internal to that component) and the function returns some HTML (again, array of VNodes in Vue)

这可能看起来很小的差异，但实际上这使得作用域插槽比普通插槽更有用.假设您正在制作一个 DataGrid 组件.仅由于作用域插槽，您可以创建一个负责呈现单行的插槽 - 每一行应该是什么样子的模板.此插槽内容被转换为一个函数，组件可以为输入数组中的每个项目调用该函数(将当前行"项目作为插槽属性传递)并将结果用作该行的表示.

This may look like a very small difference but in reality this makes scoped slots much more useful than normal slots. Lets say you are making a DataGrid component. Only because of scoped slots you can create a slot responsible for rendering single row - template of how each and every row should look like. This slot content is transformed into a function and the component can call that function for every item in the input array (passing "current row" item as a slot prop) and use the result as a representation for the row.

1. 我们能不能有一个既是命名又是作用域的槽，例如.命名的作用域槽"?

查看它的最简单方法是所有插槽都已命名，但在某些情况下，Vue 允许我们省略插槽名称并将其分配给插槽名称默认"

Easiest way to look at it is that all slots are named but in some cases Vue allows us to leave out the slot name and assigns it slot name "default"

这篇关于VueJS 中的作用域插槽到底是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！