vue2

默认插槽

挖坑-填土

<slot/>

<slot/>用来在子组件中划定要接收组件标签体中内容的区域。

//在父组件中
<MyModule> 
    我要在MyModule组件中显示    //填土
</MyModule>

//在子组件中
<slot></slot>                  //挖坑

如果子组件中没有<slot></slot>标签，则组件名标签体中的内容被忽略。

具名插槽

挖坑-填土-立碑

v-slot:插槽名

• 在子组件中使用name属性命名插槽名

• 在父组件对应位置的组件标签体中使用v-slot来指定对应插槽名

• v-slot只能在<template></template>标签中使用

• #为v-slot:的缩写，但使用缩写时必须保证有插槽名，不然会报错

<template></template>用来包裹内容，是一个不会被渲染的标签。

//在父组件中
<MyModule> 
    <template v-slot:firstSlot>    //立碑
        我要在MyModule组件中显示    //填土
    <template/>
</MyModule>

//在子组件中
<slot name="firstSlot"></slot>     //挖坑

作用域插槽

作用：本质是子组件向组件名标签体内部的数据传递

v-slot:插槽名='数据'

//在父组件中
<MyModule> 
    <template v-slot:firstSlot='data'>    //接收信息,与v-slot一起
        我要在MyModule组件中显示。{{data.message}}    //使用信息
    <template/>
</MyModule>

//在子组件中
<slot name="firstSlot" :message='message'></slot>     //通过props传递信息

通过解构赋值接收数据：

//在父组件中
<MyModule> 
    <template v-slot:firstSlot='{message}'>    //接收信息,与v-slot一起
        我要在MyModule组件中显示。{{message}}    //使用信息
    <template/>
</MyModule>

//在子组件中
<slot name="firstSlot" :message='message'></slot>     //通过props传递信息

在默认插槽中传递信息：

//在父组件中
<MyModule> 
    <template v-slot='data'>    //接收信息,与v-slot一起
        我要在MyModule组件中显示。{{data.message}}    //使用信息
    <template/>
</MyModule>

//在子组件中
<slot :message='message'></slot>     //通过props传递信息

后备内容

type='用来保底显示的数据'

//父组件中
<MyModule> 
</MyModule>

//如果组件名标签体中无内容，则展现type指定的数据
//如果组件名标签体中有内容，则展现组件名标签体中的数据
<button type="submit"> 
    <slot></slot> 
</button>

动态插槽名

动态指令参数也可以用在 v-slot 上，来定义动态的插槽名：

<MyModule>
  <template v-slot:[dynamicSlotName]>
    ...
  </template>
</MyModule>