插槽(Slot)
定义一个名child子组件,为该子组件添加内容应该在子组件的template中定义,直接在父组件的<child>标签中定义的内容不会被渲染。
在子组件中通过加入<slot>元素占位,便能够渲染父组件中子组件标签中的内容了。
插槽内容
插槽可以有默认内容,当在父组件中没有提供内容的时候,来进行显示。
<!-- submit-button --><button type="submit"> <slot>Submit</slot></button>1.<submit-button></submit-button>⬇️ <button type="submit"> Submit</button>2.<submit-button> Save</submit-button>⬇️<button type="submit"> Save</button>
作用域
父级模板里的所有内容都是在父级作用域中编译的;子模板里的所有内容都是在子作用域中编译的。
具名插槽
试想,我们有一个带有如下模版的<base-layout>组件
<div class="container"> <header> <!-- 我们希望把页头放这里 --> </header> <main> <!-- 我们希望把主要内容放这里 --> </main> <footer> <!-- 我们希望把页脚放这里 --> </footer></div>
可以看到,在组件中显示的内容是划分不同的部位的,这个时候就需要使用到<slot>元素的一个特有的属性:name来实现了。这个特性可以用来定义额外的插槽。
<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> 中的内容都会被视为默认插槽的内容。
当然,也可以将默认插槽的内容通过v-slot:default包裹起来。
v-slot 只能添加在一个 <template> 上
作用域插槽
当我们希望能够让插槽内容能够访问子组件中才有的数据时,我们可以将数据作为一个<slot>元素的特性绑定上去
新闻热点
疑难解答
图片精选