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>