教程:第 14 步
Vue教程
插槽 {#slots}
除了通过 props 传递数据外,父组件还可以通过插槽 (slots) 将模板片段传递给子组件:
vue-html
<ChildComp>
This is some slot content!
</ChildComp>
vue-html
<child-comp>
This is some slot content!
</child-comp>
在子组件中,可以使用 <slot> 元素作为插槽出口 (slot outlet) 渲染父组件中的插槽内容 (slot content):
vue-html
<!-- 在子组件的模板中 -->
<slot/>
vue-html
<!-- 在子组件的模板中 -->
<slot></slot>
<slot> 插口中的内容将被当作“默认”内容:它会在父组件没有传递任何插槽内容时显示:
vue-html
<slot>Fallback content</slot>
现在我们没有给 <ChildComp> 传递任何插槽内容,所以你将看到默认内容。让我们利用父组件的 msg 状态为子组件提供一些插槽内容吧。
帮助我们改进文档
发现翻译问题或内容错误?请告诉我们。
