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

Posted 2023-02-16

【中文标题】如何在 Vue.js 中将组件用作按钮

【英文标题】：How to use the component as a button in 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" />
                </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 中移除？

【参考方案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.