vue.js 中父组件的删除函数答案

【问题标题】：Delete function in parent component in vue.jsvue.js 中父组件的删除函数
【发布时间】：2021-12-27 16:42:02
【问题描述】：

我有一张票，如下图所示：

我有一个删除按钮作为组件，我正在尝试向它添加删除功能。我在我的工单组件中使用这个组件。所以这是我的删除组件：

<template>
        <div id="delete-button" @click.prevent="removeProductFromCart(item.id)">
            <input type="checkbox" id="checkbox">
            <div id="bin-icon">
                <div id="lid"></div>
                <div id="box">
                    <div id="box-inner">
                        <div id="bin-lines"></div>
                    </div>
                </div>
            </div>
        </div>
    </template>
    
    <script>
    import cartHelper from "../helpers/cartHelper";
    
    export default {
        props: {
            item: Object,
        },
        data() {
            return {
                loading: false,
            };
        },
        methods: {
            removeProductFromCart(id) {
                this.loading = true;
                setTimeout(() => {
                    cartHelper.removeFromCart(id, (response) => {
                        this.$store.dispatch('removeProductFromCart', {
                            cart: response.data,
                        })
                        this.loading = false
                    });
                }, 1000)
            }
        }
    };
    </script>

所以父组件是ticket组件：

[![<template>
    <div id="sold-tickets">
        <div class="card">
            <div class="sold-tickets-actions properties">
                <div class="sold-tickets-inner">
                    <DeleteButton :item = "item"  />
                </div>
            </div>
        </div>
    </div>
</template>][1]][1]

<script>
import image from "../../../../img/Hallenbad.jpg";
import DeleteButton from "./DeleteButton";
import cartHelper from "../helpers/cartHelper";

export default {
    props: {
        item: Object,
    },
    components: {DeleteButton},
    data() {
        return {
            image: image,
        };
    },
};
</script>

我的问题是，即使我在子组件（删除组件）之外单击，票证也会被删除。但是我想像按钮一样使用删除组件，我只想在单击时删除票证，而不是在按钮之外。

【问题讨论】：

DeleteButton 在 DOM 中的位置和大小是否正确？顺便说一句，正如我所见，您不需要阻止 @click 事件。此外，最好将DeleteButton 设为实际按钮，而不是 div。

标签： javascript vue.js vuejs2 vue-component

【解决方案1】：

尝试停止传播。你可能甚至不需要prevent 修饰符。

@click.prevent.stop='...'
or
@click.stop='...'

如果显示类型是block，您可能还需要检查 div 以查看它是否真的填满了页面的整个宽度。如果是这样，请使用内联类型、弹性布局或类似类型。

【讨论】：