[笔记] Vue 关于 slot-scope 的简易认知

Vue 的 slot 系列使用方法,头一回在 Element-UI 这个模组上看见,觉得用法挺神奇的,于是便笔记一下个人对 slot 的理解,以及怎样的场景会使用到。
vue.js logo vue


核心概念

slot 可以分为匿名、具名以及包含资料的 Slot。
前两者为:当父组件有在引用的子组件内写模版<template>的话,那么子组件就会将其内标注为 <slot></slot> 的地方,用父组件提供的模版表示。
带有资料的 Slot 则是:父组件提供样式,但是显示的资料则是由子组件提供。换言之,这是一个简易的方法让父组件直接取得子组件内的资料,并将以显示。这样的话,就不必先请子组件将资料 $emit 到父层,然后父层接收之后再调用相关的 methods。

类型

匿名 Slot

一个 Component 里面,只能有一个匿名插槽 (Slot)。Demo:https://codesandbox.io/s/brave-surf-99h0s

具名 Slot

虽说一个 Component 里面,只能有一个匿名插槽 (Slot),但可以有多个具有名称的 Slot。Demo:https://codesandbox.io/s/brave-surf-99h0s

带有资料的 Slot

父组件提供样式<template>,至于显示的资料则由子元件提供。子元件在 slot 上绑定资料,父元件用 slot-scope 来接收,至于 slot-scope 的命名跟子元件没有直接关联。
Demo:https://codesandbox.io/s/brave-surf-99h0s


参考资料

深入理解vue中的slot与slot-scope


其他 Vue.js 相关文章

[blogimove-CPC-TAG=vuejs-MODE=3]

按赞加入粉丝团

延伸阅读