Как передать данные в DIRECT PARENT только в Vue 2.0? - PullRequest
Новая
       27

Как передать данные в DIRECT PARENT только в Vue 2.0?

0 голосов
/ 02 октября 2019

У меня есть многократно используемый дочерний компонент 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>

1 Ответ

0 голосов
/ 02 октября 2019

На мой взгляд, у вас есть 2 варианта:
1) Просто измените названия своих событий, вызовите одно «обновление» (не особенно описательное), а другое «update2» или что-нибудь, кроме «update».
2) Другая вещь, которую вы можете сделать, это стиль рабочей реакции, т.е. вместо передачи события в подпорке с функцией обратного вызова, которая делает что-то в родительском элементе. Как было указано, это не должно быть случайными событиями, которые не должны распространяться глобально.

...