Vuejs
<slot>
是什麽? ✐Vue 中的 <slot>
是 Vue 内置的组件 build-in component 的其中一种组件,灵感来源於 web component,是一个 content distribution API。透过 <slot>
提供的保留空间,我们可以显示从一个组件传递到另一个组件的内容,该内容可以是数据、HTML 元素(或任何模板代码内容),而 <slot>
元素作为承载内容分发的出口,则会被该分发内容 替换取代
。
<slot>
和 props
可以做到在子组件中呈现内容,明显的差距之一是 <slot>
可以插入 HTML element
而不必担心 XSS 问题。
<slot>
简单的使用方式如下:
假如今天我们想要做一个组件,其文字内容是透过 <slot>
分发:
Vue.component('my-comonent', {
template: `<button><slot></slot></button>`
})
const vm = new Vue({
el: '#app',
data: {
text: 'BUTTON'
},
template: `<div id="app"><my-comonent>{{ text }}</my-comonent></div>`,
})
my-comonent
的 slot
将被分发的 {{ text }}
取代,按钮会呈现如下内容。
简单来说:
slot
内置组件将被设置在要有插槽的 子组件
上,而使用有插槽组件的 父组件
,便可以写入要取代 <slot>
的内容。
注意:若是没有在子组件中使用 <slot>
,父组件传入子组件的内容将会被抛弃,如下方内容:
Vue.component('my-comonent', {
template: `<button></button>`
})
const vm = new Vue({
el: '#app',
data: {
text: 'BUTTON'
},
template: `<div id="app"><my-comonent>{{ text }}</my-comonent></div>`,
})
这次 my-comonent
中没有写入要作为内容分发的 <slot>
,按钮不会呈现文字内容,该文字 被抛弃
。
插槽中使用的数据内容 scope
为所处模板的 scope
,也就是当下模板 instance 的 property。
Vue.component('my-comonent', {
props: ['url'],
template: `<button><slot></slot></button>`
})
const vm = new Vue({
el: '#app',
data: {
text: 'BUTTON',
},
template: `<div id="app"><my-comonent url="xxx">{{ text }}</my-comonent></div>`,
})
以上述范例来说,插槽可以访问 vm instance scope,不能访问 my-comonent
scope
内容 url
。
总结来说:
父级模板
的内容都是在 父级 scope
编译的,所以上述范例中插槽可以访问 父级 scope
。子级模板
的内容都是在 子级 scope
编译的,内容可以访问 子级作用域 scope
。可以为插槽准备 後备内容
,当想要设置一个 预设默认值
时,该功能很有用。
Vue.component('my-comonent', {
template: `<button><slot>Default</slot></button>`
})
const vm = new Vue({
el: '#app',
data: {
text: 'BUTTON'
},
template: `<div id="app"><my-comonent></my-comonent></div>`,
})
按钮由於提供了後备内容,插槽没传入内容会呈现如下的默认值:
以上为此次内容,感谢看到这里的你,我们明天见。
若是文中有任何错误、错字、想讨论的内容,欢迎各位大大不吝鞭笞指正、交流分享,笔者不慎感激 ✦ ✦ ✦
▶︎ 笔者 github:https://github.com/YUN-RU-TSENG
▶︎ 老王卖瓜之笔者另一篇铁人:每天来点 CSS Specification
▶︎ 倘若不断向深处扎根,似乎就能茁壮成长 - RM
>>: Day 26:ELK stack for observation system
故障排除小技巧 通常故障排除的流程如下图 常见的陷阱 误解故障的现象,扭曲现象的含义,只会浪费时间追...
最後一天了,本来想继续写些技术的东西,但我就烂,最後一天就轻松一点,写个总结吧! 参加这次比赛最崩溃...
函式没办法使用其他函式中的变数 #include <stdio.h> #include ...
runBlocking 中文用户如我们? 直译一下就是,跑一个塞住 恩,三小? 他真正的意思是,执行...
计算属性(Computed) 无传入值 具回传值(return) 对来源属性进行操作-> 触发...