vue插槽slot——子组件挖坑，父组件定义坑内容

本文主要是介绍vue插槽slot——子组件挖坑，父组件定义坑内容，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

子组件的封装：

共用的部分抽成组件，不共用的部分预留插槽(调用组件时定义不同的内容)

------------------------------------------------------------插槽的使用--------------------------------------------------------------

调用组件里面的元素 -----》替换插槽位置内容
<slot>标签里面定义插槽内容的默认值

eg:

带插槽的子组件cpn：

<slot>
插槽默认值
</slot>

调用子组件cpn：

<cpn></cpn>---------------------------------显示“插槽默认值”

<cpn>
<span>哈哈哈</span>---------------------------------替换“插槽默认值”显示“哈哈哈”
</cpn>//(若子组件cpn无slot标签则调用子组件中间的内容会被丢弃)

------------------------------------------------------------具名插槽--------------------------------------------------------------

<slot name="插槽名称"></slot>

slot="插槽名称“

2.6.0更新 v-slot:插槽名称======>v-slot:default(默认)

缩写 #插槽名称(v-slot:替换#)======>#default(默认)

动态插槽 v-slot:[dynamicSlotName]

eg:

带插槽的子组件cpn：

<slot name="center"><span>中间</span></slot>

调用子组件cpn：

<cpn>
<span slot="center">替换center名字的插槽</span>
</cpn>

2.6.0更新------------------------------------------------------------

<cpn>
<span v-slot:center>替换center名字的插槽</span>
</cpn>

缩写：

<cpn>
<span #center>替换center名字的插槽</span>
</cpn>

------------------------------------------------------------作用域插槽--------------------------------------------------------------

绑定数据到插槽，利用slot-scope或者v-slot调用数据展示

子组件cpn:

<slot v-bind:user="user">======>插槽绑定数据

调用子组件cpn：

//包含所有插槽 prop属性的对象命名为 slotProps

<cpn>

<template slot="default" slot-scope="slotProps">

{{ slotProps.user.firstName }}

</template>

</cpn>

2.6.0更新------------------------------------------------------------

<cpn>

<template v-slot:default="slotProps">

{{ slotProps.user.firstName }}

</template>

</cpn>

解构插槽传值------------------------------------------------------

<cpn v-slot="{ user }">
{{ user.firstName }}
</cpn>

<cpn v-slot="{ user: person }">--user重命名为person
{{ person.firstName }}
</cpn>

<cpn v-slot="{ user = { firstName: 'Guest' } }">---为user设置默认值
{{ user.firstName }}
</cpn>