Article Directory
document
Official website: https://v2.cn.vuejs.org/v2/guide/components-slots.html
Shang Silicon Valley video: https://www.bilibili.com/video/BV1Zy4y1K7SH?p=102
default slot
My understanding is: the child component leaves a fragment that can be configured in the parent component
Use:
in 子组件defining a slot:
in 父组件telling the child component what to replace <slot></slot> with
named slot
Named slots allow us to define multiple slots in subcomponents
Use: define slots
in 子组件, and use nameattributes to distinguish different slots.
A <slot> outlet without a name will have the implicit name "default". Pass in
( where xx is the attribute value of the slot in the subcomponent) to insert content into the specified slot: the middle two will be placed in the slot without the name attribute父组件v-slot:xx
Notice:
v-slot can only be added on top, if <template>you want to place it elsewhere, you can use slotattributes . Will show the second one!
slot的属性值写在双引号中！只能用其中的一个
Scoped slots
Used as 父组件needed 子组件中的数据.
For example:
子组件A slot is defined in:
父组件想要修改slot处显示的值, but the user data is in the child component, and the parent component cannot get it directly;
we can pass values to the parent component by binding properties in the child component!
For example, in the figure below, we take the value from 子组件中user通过user属性传给插槽的使用者(the parent component)
父组件:
it is worth noting that the value obtained is an object, its key is the attribute defined by the child component, and the value is the real value passed. Therefore, the above figure The user passed from the subcomponent through slotProps.user
is:
