Vue slot:编译作用域、後备内容

tags: 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-comonentslot 将被分发的 {{ 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 为所处模板的 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


参考资料:

  1. Vuejs.org 2.x
  2. Vue Slots | Understanding of Slots in Vuejs | Learn Vuejs Slots

<<:  Day 29:30 天自我挑战阅读说明

>>:  Day 26:ELK stack for observation system

[Day 7] SRE - 故障排除小技巧

故障排除小技巧 通常故障排除的流程如下图 常见的陷阱 误解故障的现象,扭曲现象的含义,只会浪费时间追...

第 30 天 - 总结

最後一天了,本来想继续写些技术的东西,但我就烂,最後一天就轻松一点,写个总结吧! 参加这次比赛最崩溃...

30天学会C语言: Day 27-指标当参数

函式没办法使用其他函式中的变数 #include <stdio.h> #include ...

day8 kotlin coroutine的 runBlocking, withContext

runBlocking 中文用户如我们? 直译一下就是,跑一个塞住 恩,三小? 他真正的意思是,执行...

[30天 Vue学好学满 DAY6] 计算属性(Computed)

计算属性(Computed) 无传入值 具回传值(return) 对来源属性进行操作-> 触发...