关于vue插槽那点事

木子M
165 阅读4分钟

直接“3W1H”走起

What

Vue 实现了一套内容分发的 API，将<slot>元素作为承载分发内容的出口。说白了slot就是个槽口就是个坑（此坑非彼坑），你在使用组件时可以拿内容去填坑，子组件在自己的模板中去渲染父组件传递过来的内容。

Why

丰富组件内容和布局的灵活性，增强组件的扩展性和实用性，让用户可以去更好地复用组件和对其做定制化处理

Where

其实知道了为什么用就大致知道了在哪用，这个没有硬性要求。例如如果父组件在使用到一个复用组件的时候，在不同的地方有少量的更改，这种情况没有必要去重写，此时我们就可以使用插槽。当然还需根据自己项目实际情况来，不做过多赘述

How

插槽分为三种：默认插槽、具名插槽以及作用域插槽

常规使用组件

//APP.vue
<my-slot></my-slot>

MySlot内容

<p>this is start</p>
<p>this is end</p>

效果如下 showslot1.png

  • 默认插槽：

父组件在子组件<slot> </slot>处插入内容

<my-slot :name="name">
  <p>该我表演了</p>
</my-slot>

子组件：

<p>this is start</p>
  <slot></slot>
<p>this is end</p>

效果如下： showslot2.png 检查代码元素，发现以上代码就相当于

dmslot2.png

有的小伙伴可能会问那它有没有默认值呢，我们之前学过的很多东西都有默认值，例如函数参数，props，provide/inject等等，答案是有的，我们直接在槽口里面写入默认模版/代码即可，如

//父组件
<my-slot></my-slot>

//子组件
<p>this is start</p>
    <slot><span> 如果你看到我，那我就是默认值，没有人和我玩</span></slot>
<p>this is end</p>

效果 showslot3.png

以上代码就相当于

dmslot3.png

如果我们派发不止一个元素那将显示哪个呢？第一个？最后一个？还是所有? 光说没用，咱得试试

//父组件
<my-slot :name="name">
  <p>该我表演了</p>
  <span>瞅瞅</span>
  <button>click Me!  click Me!</button>
</my-slot>

效果：

showslot4.png 如果我们有多个槽口呢？都显示吗？

//子组件
<p>this is start</p>
    <slot><span> 如果你看到我，那我就是默认值，没有人和我玩</span></slot>
    <slot><span> 如果你看到我，那我就是默认值，没有人和我玩</span></slot>
    <slot><span> 如果你看到我，那我就是默认值，没有人和我玩</span></slot>
<p>this is end</p>

效果：

showslot5.png

那可不，都显示了呢

还有没有问题，没有问题我提了啊。如果我要指定某元素派发到某槽口呢？例如刚刚你是发传单，见人就发，现在我只让你发给穿黄衣服的人。也就是我们现在要在父组件中，精确的在想要的位置，插入对应的内容呢，这就引出了具名插槽

  • 具名插槽 怎么样能让原有插槽成为具名插槽呢，倒也简单，给插槽命一个名即可，即添加name属性。
//子组件
<p>this is start</p>
  <slot name="title"
    ><span> 如果你看到我，那我就是默认值，没有人和我玩</span></slot
  >
  <slot name="con"
    ><span> 如果你看到我，那我就是默认值，没有人和我玩</span></slot
  >
  <slot name="btn"
    ><span> 如果你看到我，那我就是默认值，没有人和我玩</span></slot
  >
<p>this is end</p>

父组件通过v-slot : name 的方式添加内容：

<my-slot>
  <template v-slot:title>
    <p>该我表演了</p>
  </template>
  <template v-slot:con>
    <span>瞅瞅</span>
  </template>
  <template v-slot:btn> <button>click Me! click Me!</button> </template>
</my-slot>

注：为了方便，书写 v-slot:xx 的形式时，可以简写为 #xx。自己可以试试，我就不演示了

另外说一点插槽名也是有默认值的，默认值很默认，那就是default。。。例如

//子组件
<p>this is start</p>
  <slot name="title"
    ><span> 如果你看到我，那我就是默认值，没有人和我玩</span></slot
  >
  <slot name="con"
    ><span> 如果你看到我，那我就是默认值，没有人和我玩</span></slot
  >
  <slot><span> 如果你看到我，那我就是默认值，没有人和我玩</span></slot>
  <slot name="btn"
    ><span> 如果你看到我，那我就是默认值，没有人和我玩</span></slot
  >
<p>this is end</p>

父组件：

useslot7.png

  • 作用域插槽 插槽和模版都有编译作用域，父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。父组件不能直接使用子组件内的数据，那有没有什么方法让我们可以使用使用子组件的数据呢？我们把子组件需要传递的内容绑到 <slot> 上，然后在父组件中v-slot:name = ‘value’，设置一个valu值来接收我们传递过来的数据，接着根据自身需求去使用：
//父组件
    <my-slot>
      <template #testdata="slotfirstProps">
        {{ slotfirstProps.value1 }}
      </template>

      <template #default="slotsecondProps">
        {{ slotsecondProps.value2 }}
      </template>
    </my-slot>

//子组件
  <div>
    <p>this is start</p>
    //d1、d2都是我定义在data中的数据
    <slot name="testdata" :value1="d1"> 这就是默认值1</slot>
    <slot :value2="d2"> 这就是默认值2 </slot>
    <p>this is end</p>
  </div>

效果如下：

effect.png

铛铛铛～完结撒花，如有不对欢迎指正。觉得有帮助的话记得点个赞哦

avatar
文章
阅读
粉丝