如何在 Vue.js 中将组件用作按钮答案

【问题标题】：How to use the component as a button in Vue.js如何在 Vue.js 中将组件用作按钮
【发布时间】：2021-12-24 19:57:25
【问题描述】：

我有一个购物车视图，它的子组件是 SoldTickets，在 SoldTicket 组件中我有删除按钮组件。

所以我在我的 SoldTickets 组件中显示购物车项目，您会看到以下代码：

<template>
    <div id="sold-tickets">
        <div class="card" v-for="item in cart.attributes.items" :key="item.id">
            <div class="sold-tickets-actions">
                <div class="sold-tickets-inner">
                    <img class="sold-tickets-image" :src="image" alt="Sold Ticket"/>
                </div>
            </div>
            <div class="sold-tickets-actions properties">
                <div class="sold-tickets-inner">
                    <div class="ticket-details">
                        <div class="ticket-prop">
                            <div class="ticket-name">{{ item.product_name }}</div>
                            <div class="ticket-type">{{ item.variation_name }}</div>
                        </div>
                        <div class="ticket-prop">
                            <div class="price-prop">
                                <div class="count">{{ item.amount }}</div>
                                <div>x</div>
                                <div class="price">€{{ item.total_price_incl_vat }}</div>
                            </div>
                            <div class="article-prop">
                                <div class="article-number">{{ item.updated_at }}</div>
                                <div>-</div>
                                <div class="ticket-category">{{ item.product_short_description }}</div>
                            </div>
                        </div>
                    </div>
                    <DeleteButton @click.prevent="removeProductFromCart(item.id)" />
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import image from "../../../../img/Hallenbad.jpg";
import DeleteButton from "./DeleteButton";
import cartHelper from "../helpers/cartHelper";

export default {
    components: {DeleteButton},
    data() {
        return {
            image: image,
        };
    },
    computed: {
        cart() {
            return this.$store.state.cart;
        },
    },
    methods: {
        removeProductFromCart(id) {
            cartHelper.removeFromCart(id, (response) => {
                this.$store.dispatch('removeProductFromCart', {
                    cart: response.data,
                })
            });
        },
    },
};
</script>

所以基本上我将购物车存储在 Vuex 商店中，并且我想在单击删除组件时删除该项目（这意味着我想像按钮一样使用我的删除组件）。但我无法做到这一点，而且我没有收到任何错误。

【问题讨论】：

不清楚您遇到了什么问题。该项目是否没有从 Vuex 中移除？

标签： vue.js vuejs2 vue-component vuex

【解决方案1】：

DeleteButton 需要发出点击函数，例如：

<template>
  <button @click="$emit('click')">
    Delete
  </button>
</template>

还有SoldTickets

@click 是按钮发出的函数的名称。通过这样做，您可以捕获事件并分配一个函数来做某事！

Note: I think .prevent is not needed because you are not in a form.

【讨论】：