Vue.js如何将自定义DeleteButton组件作为按钮实现删除功能

你在自定义DeleteButton组件上直接绑定@click事件时，Vue默认监听的是组件主动抛出的自定义click事件，而非组件内部元素的原生点击事件，所以点击后没有触发逻辑也不会报错。

提供两种可任选的修复方式：

方式1：添加.native修饰符（无需修改子组件） #

直接修改SoldTickets组件中调用DeleteButton的代码，给click事件加.native修饰符，告诉Vue要监听组件根元素的原生点击事件：

<DeleteButton @click.native.prevent="removeProductFromCart(item.id)" />

方式2：子组件内部抛出click事件（更符合组件封装规范） #

修改DeleteButton组件的内部代码，给内部的原生按钮绑定点击事件，主动向外抛出click事件：

<!-- DeleteButton 组件的template部分示例 -->
<template>
  <button class="delete-btn" @click="$emit('click', $event)">
    删除
  </button>
</template>

修改后父组件原来的@click.prevent写法不需要改动即可正常生效。

如果修改后仍然没有效果，可以先在removeProductFromCart方法第一行添加console.log(id)，确认方法是否正常触发：

• 如果能打印出id，说明事件绑定正常，问题出在cartHelper.removeFromCart请求逻辑或者Vuex的removeProductFromCart action逻辑中，可依次排查接口请求是否成功、Vuex中是否正确修改了cart状态。
• 如果不能打印出id，可检查DeleteButton内部是否有stopPropagation之类阻止事件冒泡的逻辑，或者根元素是否不是可点击的元素。

内容的提问来源于stack exchange，提问作者magic bean