vue之插槽slot详解

1、基本用法（单个插槽）

1. 在公共组件中内容不固定的地方写上slot标签
2. 在父组件调用时，在组件标签中间写入内容，即可替代公共组件的slot标签

公共组件share中定义 slot

<template>
  <div class="share">
    <p>首页</p>
    <slot></slot>
  </div>
</template>

注：可以在封装时，给slot中间写上默认值，页面中如果写了会覆盖，如果不写会直接引用

父组件中在share中间的内容会渲染在slot标签的位置

注：可以写标签等任意内容

<template>
  <div class="index">
    <share>花花花花花</share>
  </div>
</template>

2、具名插槽（多个插槽）

• 同一个组件内可以定义多个插槽，以name属性区分

<template>
  <div class="share">
    <p>
      标题：<slot name="title"></slot>
    </p>
    <p>
      内容：<slot name="content"></slot>
    </p>
    <p>
      文字：<slot name="text"></slot>
    </p>
     <p>
      默认：<slot></slot>
    </p>
  </div>
</template>

• 父组件中调用时，以template标签引入，并使用v-slot绑定相应插槽的name属性作为区分

<template>
  <div class="index">
    <share>
      <template v-slot:title>
        <h1>我是标题</h1>
      </template>
      <template v-slot:content>
        <h1>我是内容</h1>
      </template>
      <template v-slot:text>
        <h1>我是文字</h1>
      </template>
      <template v-slot:default>
        <p>我是默认插槽</p>
      </template>
    </share>
  </div>
</template>

//v-slot是vue的一个指令， 缩写为字符 #
	  <template #title>
        <h1>我是标题</h1>
      </template>

注：如果不带name的slot为默认插槽，v-slot为default

3、作用域插槽（插槽传值）

• 组件中使用v-bind直接绑定组件data中的数据，传递给父组件，user.name为插槽默认值

  <p>
      默认插槽传值：
      <slot v-bind:user="user">{{ user.name }}</slot>
    </p>

 data() {
    return {
      user: { id: 1, name: "区区" }
    };
  }

• 父组件直接接受使用

//1、具名插槽：slotProps.user即为子组件传递过来的user对象
<template v-slot:default="slotProps">{{ slotProps.user.name }}</template>

//2、如果是单个独占默认插槽，直接在标签内v-slot="slotProps"接收使用
<share v-slot="slotProps">
  {{ slotProps.user.name }}
</share>

// 3、解构插槽prop，直接解构获取到user对象，解构别名 { user:u }，有名字的缩写 #default=“{ user }”
<share v-slot="{ user }">
  {{user.name }}
</share>

动态插槽

可以绑定一个变量

<template v-slot:[dyname]>{{dyname}}111111111</template>