Vue相关,插槽怎么用!

vue

插槽内容

Vue 实现了一套内容分发的 API,将 <slot> 元素作为承载分发内容的出口。

它允许你像这样合成组件:

<navigation-link url="/profile">

Your Profile

</navigation-link>

在 <navigation-link> 的模板中写为:

<a

v-bind:href="url"

class="nav-link"

>

<slot></slot>

</a>

当组件渲染的时候,<slot></slot> 将会被替换为“Your Profile”。

插槽内可以包含任何模板代码,包括 HTML:

<navigation-link url="/profile">

<!-- 添加一个 Font Awesome 图标 -->

<span class="fa fa-user"></span>

Your Profile

</navigation-link>

甚至其它的组件:

<navigation-link url="/profile">

<!-- 添加一个图标的组件 -->

<font-awesome-icon name="user"></font-awesome-icon>

Your Profile

</navigation-link>

如果 <navigation-link> 没有包含一个 <slot> 元素,则该组件起始标签和结束标签之间的任何内容都会被抛弃。

编辑作用域

当你想在一个插槽中使用数据时,例如:

<navigation-link url="/profile">

Logged in as {{ user.name }}

</navigation-link>

以下插槽跟模板的其它地方一样可以访问相同的实例 property (也就是相同的“作用域”),而不能访问 <navigation-link> 的作用域。例如 url 是访问不到的:

<navigation-link url="/profile">

Clicking here will send you to: {{ url }}

<!--

这里的 `url` 会是 undefined,因为其 (指该插槽的) 内容是

_传递给_ <navigation-link> 的而不是

在 <navigation-link> 组件*内部*定义的。

-->

</navigation-link>

作为一条规则,请记住:父级模板里的所有内容都是在父级作用域中编译的;子模板里的所有内容都是在子作用域中编译的。

后备内容

有时为一个插槽设置具体的后备 (也就是默认的) 内容是很有用的,它只会在没有提供内容的时候被渲染。

例如在一个 <submit-button> 组件中:

<button type="submit">

<slot></slot>

</button>

我们可能希望这个 <button> 内绝大多数情况下都渲染文本“Submit”。为了将“Submit”作为后备内容,我们可以将它放在 <slot> 标签内:

<button type="submit">

<slot>Submit</slot>

</button>

现在当我在一个父级组件中使用 <submit-button> 并且不提供任何插槽内容时:

<submit-button></submit-button>

后备内容“Submit”将会被渲染:

<button type="submit">

Submit

</button>

但是如果我们提供内容:

<submit-button>

Save

</submit-button>

则这个提供的内容将会被渲染从而取代后备内容:

<button type="submit">

Save

</button>

具名插槽

有时我们需要多个插槽。例如对于一个带有如下模板的 <base-layout> 组件:

<div class="container">

<header>

<!-- 我们希望把页头放这里 -->

</header>

<main>

<!-- 我们希望把主要内容放这里 -->

</main>

<footer>

<!-- 我们希望把页脚放这里 -->

</footer>

</div>

对于这样的情况,<slot> 元素有一个特殊的 attribute:name。这个 attribute 可以用来定义额外的插槽:

<div class="container">

<header>

<slot name="header"></slot>

</header>

<main>

<slot></slot>

</main>

<footer>

<slot name="footer"></slot>

</footer>

</div>

一个不带 name 的 <slot> 出口会带有隐含的名字“default”。

在向具名插槽提供内容的时候,我们可以在一个 <template> 元素上使用 v-slot 指令,并以 v-slot 的参数的形式提供其名称:

<base-layout>

<template v-slot:header>

<h1>Here might be a page title</h1>

</template>

<p>A paragraph for the main content.</p>

<p>And another one.</p>

<template v-slot:footer>

<p>Here's some contact info</p>

</template>

</base-layout>

现在 <template> 元素中的所有内容都将会被传入相应的插槽。任何没有被包裹在带有 v-slot 的 <template> 中的内容都会被视为默认插槽的内容。

然而,如果你希望更明确一些,仍然可以在一个 <template> 中包裹默认插槽的内容:

<base-layout>

<template v-slot:header>

<h1>Here might be a page title</h1>

</template>

<template v-slot:default>

<p>A paragraph for the main content.</p>

<p>And another one.</p>

</template>

<template v-slot:footer>

<p>Here's some contact info</p>

</template>

</base-layout>

任何一种写法都会渲染出:

<div class="container">

<header>

<h1>Here might be a page title</h1>

</header>

<main>

<p>A paragraph for the main content.</p>

<p>And another one.</p>

</main>

<footer>

<p>Here's some contact info</p>

</footer>

</div>

注意 v-slot 只能添加在 <template> 上。

作用域插槽

有时让插槽内容能够访问子组件中才有的数据是很有用的。例如,设想一个带有如下模板的 <current-user> 组件:

<span>

<slot>{{ user.lastName }}</slot>

</span>

我们可能想换掉备用内容,用名而非姓来显示。如下:

<current-user>

{{ user.firstName }}

</current-user>

然而上述代码不会正常工作,因为只有 <current-user> 组件可以访问到 user 而我们提供的内容是在父级渲染的。

为了让 user 在父级的插槽内容中可用,我们可以将 user 作为 <slot> 元素的一个 attribute 绑定上去:

<span>

<slot v-bind:user="user">

{{ user.lastName }}

</slot>

</span>

绑定在 <slot> 元素上的 attribute 被称为插槽 prop。现在在父级作用域中,我们可以使用带值的 v-slot 来定义我们提供的插槽 prop 的名字:

<current-user>

<template v-slot:default="slotProps">

{{ slotProps.user.firstName }}

</template>

</current-user>

在这个例子中,我们选择将包含所有插槽 prop 的对象命名为 slotProps,但你也可以使用任意你喜欢的名字。

以上是 Vue相关,插槽怎么用! 的全部内容, 来源链接: utcz.com/z/379649.html

回到顶部