Vue 实现了一套内容分发的 API,这套 API 的设计灵感源自 Web Components 规范草案,将slot
元素作为承载分发内容的出口。那么具体要怎么用呢?
不使用slot
- <div id="root">
- <child content="<p>world</p><p>world</p><p>world</p>"></child>
- </div>
- <script>
- Vue.component('child',{
- props: ['content'],
- template: `<div><p>hello</p>
- <div v-html="this.content"></div>
- </div>`
- })
- var vm = new Vue({
- el:'#root'
- })
- </script>
使用slot
- <div id="root">
- <child>
- <p>world</p><p>world</p><p>world</p>
- </child>
- </div>
- <script>
- Vue.component('child',{
- props: ['content'],
- template: `<div><p>hello</p>
- <slot></slot>
- </div>`
- })
- var vm = new Vue({
- el:'#root'
- })
- </script>
当组件渲染的时候,<slot></slot>
将会被替换为“world world world”。插槽内可以包含任何模板代码,包括 HTML,甚至其他的组件。使用slot
后感觉逻辑清晰,很方便。
默认内容
有时为一个插槽设置具体的默认内容是很有用的,它只会在没有提供内容的时候被渲染。例如在一个child组件中:
- <div id="root">
- <child></child>
- </div>
- <script>
- Vue.component('child',{
- props: ['content'],
- template: `<div><p>hello</p>
- <slot>我是默认文字</slot>
- </div>`
- })
- var vm = new Vue({
- el:'#root'
- })
- </script>
如上代码中,当child组件不提供任何插槽内容时,内容“我是默认文字”将被渲染在页面上。
具名插槽
有时我们需要多个插槽。比如一个组件中显示页头,内容和页脚,对于这样的情况,slot
元素有一个特殊的特性:name
,这个特性可以用来定义额外的插槽:
- <div id="root">
- <child>
- <div class="header" slot="header">header</div>
- <div class="footer" slot="footer">footer</div>
- </child>
- </div>
- <script>
- Vue.component('child',{
- template: `<div>
- <slot name="header"></slot>
- <div class="main">main</div>
- <slot name="footer"></slot>
- </div>`
- })
- var vm = new Vue({
- el:'#root'
- })
- </script>
注意
在 2.6.0 版本中,vue官方为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot
指令)。它取代了 slot
和slot-scope
这两个目前已被废弃但未被移除且仍在文档中的特性。
微信小程序
互联网开发,终身学习者,欢迎您的关注!