插槽内容
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>
具名插槽