Question

我有一个可重用的子组件SizeSelector，它已用于两个用于不同目的的组件。

在SizeSelector

    onSizeSelectionChanged() {
        if (this.isMultiSelectable === false) {
            this.selectedVariants = [this.selectedVariant];
        }

        this.$emit('update', this.selectedVariants);
    }

在组件A下：

<product-size-form :product="product" @update="selectedVariant = $event[0]"></product-size-form>

在组件B下：

                <product-size-form
                    :product="product"
                    :is-multi-selectable="true"
                    @update="selectedVariants = $event; log($event, 'modal')">
                </product-size-form>

我的问题是，当我单击并更改selectedVariants中的B时，它发出了A的字样。如何解决？我似乎该事件已在全球范围内发出

更新

听起来很疯狂。

这是行不通的

            <div class="product-form">
                <product-size-form
                    :product="product"
                    :is-multi-selectable="true"
                    @update="selectedVariants = $event; log($event, 'modal')">
                </product-size-form>
            </div>

这完全可以正常工作

            <div class="product-form-wow-this-is-working-wtf">
                <product-size-form
                    :product="product"
                    :is-multi-selectable="true"
                    @update="selectedVariants = $event; log($event, 'modal')">
                </product-size-form>
            </div>

Answer 1

从我的角度来看，您有2种选择：
1）只需更改事件的名称，调用一个“ update”（不是特别描述性的），然后调用另一个“ update2”或除“ update”以外的其他任何内容。
2）您可以做的另一件事是工作反应风格，即不要在具有回调函数的prop中发出事件传递，该回调函数在父对象中执行某些操作。就像有人指出的那样，这应该是不应该在全球范围内发出的不幸事件。

如何仅在Vue 2.0中将数据发送到DIRECT PARENT？

1 个答案: