Vue从入门到实战：使用插槽分发内容

来自CloudWiki
跳转至： 导航， 搜索

组件是当作自定义元素来使用的，元素可以有属性和内容。

通过组件定义的prop来接收属性，那么内容呢 ？可以通过<slot>元素来解决。

简单使用

Vue 实现了一套内容分发的 API，这套 API 的设计灵感源自 Web Components 规范草案，将 <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”。

编译作用域

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

<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> 上 (只有一种例外情况)，这一点和已经废弃的 slot attribute 不同。

作用域插槽

有时让插槽内容能够访问子组件中才有的数据是很有用的

为此，我们可以在子组件的<slot>元素上使用v-bind指令来绑定一个prop

绑定在 <slot> 元素上的 attribute 被称为插槽 prop。 

 
Vue.component('my-button', {
				data(){
					return {
						titles: {
							login: '登录',
							register: '注册'
						}
					}
				},
	      template: `
	      	<button>
	      		<slot v-bind:values = "titles">
	      			{{ titles.login }}
	      		</slot>
	      	</button>`
    		
  		});

现在在父级作用域中，我们可以使用带值的 v-slot 来定义我们提供的插槽 prop 的名字： 

 
<my-button>
				<template v-slot:default="slotProps">
					{{slotProps.values.register}}
				</template>
			</my-button>


简化形式： 

  
<!--
			<my-button v-slot:default="slotProps">
				{{slotProps.values.register}}
			</my-button>
			-->
			<!--
			<my-button v-slot="{values}">
				{{values.register}}
			</my-button>

注意默认插槽的缩写语法不能和具名插槽混用，因为它会导致作用域不明确： 

<!-- 无效，会导致警告 -->
<current-user v-slot="slotProps">
  {{ slotProps.user.firstName }}
  <template v-slot:other="otherSlotProps">
    slotProps is NOT available here
  </template>
</current-user>

只要出现多个插槽，请始终为所有的插槽使用完整的基于 <template> 的语法： 

<current-user>
  <template v-slot:default="slotProps">
    {{ slotProps.user.firstName }}
  </template>

  <template v-slot:other="otherSlotProps">
    ...
  </template>
</current-user>

解构插槽Prop

在支持的环境下 (单文件组件或现代浏览器)，你也可以使用 ES2015 解构来传入具体的插槽 prop，如下：

<current-user v-slot="{ user }">
  {{ user.firstName }}
</current-user>

这样可以使模板更简洁，尤其是在该插槽提供了多个 prop 的时候。它同样开启了 prop 重命名等其它可能，例如将 user 重命名为 person：

<current-user v-slot="{ user: person }">
  {{ person.firstName }}
</current-user>


源代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script src="vue.js"></script>
	</head>
	<body>
		<div id="app">
			<!--
			<my-button>
				<template v-slot:default="slotProps">
					{{slotProps.values.register}}
				</template>
			</my-button>
			-->
			<!--
			<my-button v-slot:default="slotProps">
				{{slotProps.values.register}}
			</my-button>
			-->
			<!--
			<my-button v-slot="{values}">
				{{values.register}}
			</my-button>
			-->
			<my-button v-slot="{values:titles}">
				{{titles.register}}
			</my-button>
		
			
		</div>
	
		<script>
			Vue.component('my-button', {
				data(){
					return {
						titles: {
							login: '登录',
							register: '注册'
						}
					}
				},
	      template: `
	      	<button>
	      		<slot v-bind:values = "titles">
	      			{{ titles.login }}
	      		</slot>
	      	</button>`
    		
  		});
  
			new Vue({
			  el: '#app'
			})
		</script>
	</body>
</html>
取自“http://www.openbrains.net/mediawiki/index.php?title=Vue从入门到实战：使用插槽分发内容&oldid=24954”