用slot遇到的一个坑

date
May 23, 2022
slug
15
status
Published
tags
Learn
Javascript
summary
记录在使用vue的slot插槽上遇到的坑
type
Post
Book
最近实现了一个表单组件，其中用到了slot插槽。先上代码：
<template>
  <form class="validate-form-container" action="">
    <slot name="default"></slot>
    <div class="submit-area" @click="submitForm">
      <slot name="submit">
        <button type="submit" class="btn btn-primary">提交</button>
      </slot>
    </div>
  </form>
</template>
在这里我用到了一个具名插槽“submit”来实现插入一个提交按钮。并且想在这个按钮上绑定一个click事件用于提交我的表单。但由于无法在slot标签上绑定事件，所以只能在slot的上一层标签上绑定。
但是这样就会带来一个问题：点击整个div标签都能触发事件提交表单。
notion image
然后通过搜索引擎找了很多博客都没有解决问题，最后还是得靠vue的文档。所以说文档永远是最好的工具。

作用域插槽

<template>
  <form class="validate-form-container" action="">
    <slot name="default"></slot>
    <slot name="submit" :handleClick="submitForm">
      <button type="submit" class="btn btn-primary">提交</button>
    </slot>
  </form>
</template>
子模板通过将submitForm函数绑定在handleClick插槽prop中，然后父级模板可以通过v-slot:submit=”slotProps”获取
<template v-slot:submit="slotProps" >
  <span class="btn btn-danger" @click="slotProps.handleClickSubmit">登陆</span>
</template>
然后就可以绑定在按钮上。

© LewisWong 2021 - 2025