vuejs обновляет родительские данные из дочернего компонента

Я начинаю играть с vuejs (2.0). Я построил простую страницу с одним компонентом. На странице есть один экземпляр Vue с данными. На этой странице я зарегистрировался и добавил компонент в HTML. Компонент имеет один input[type=text]. Я хочу, чтобы это значение отражалось на родителе (основной экземпляр Vue).

Как правильно обновить родительские данные компонента? Передача привязанного реквизита от родителя не годится и выдает некоторые предупреждения на консоль. У них есть что-то в их документе, но это не работает.

Двусторонняя привязка в Vue 2.0 устарела в пользу использования более управляемой событиями архитектуры. В общем, ребенок не должен мутировать свои реквизиты. Скорее это должно $emitсобытия и позволить родителю реагировать на эти события.

В вашем конкретном случае вы можете использовать пользовательский компонент с v-model. Это специальный синтаксис, который допускает нечто близкое к двустороннему связыванию, но на самом деле это сокращение для управляемой событиями архитектуры, описанной выше. Вы можете прочитать об этом здесь -> https://vuejs.org/v2/guide/components.html#Form-Input-Components-using-Custom-Events .

Вот простой пример:

Vue.component('child', {
  template: '#child',
  
  //The child has a prop named 'value'. v-model will automatically bind to this prop
  props: ['value'],
  methods: {
    updateValue: function (value) {
      this.$emit('input', value);
    }
  }
});

new Vue({
  el: '#app',
  data: {
    parentValue: 'hello'
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>

<div id="app">
  <p>Parent value: {{parentValue}}</p>
  <child v-model="parentValue"></child>
</div>

<template id="child">
   <input type="text" v-bind:value="value" v-on:input="updateValue($event.target.value)">
</template>

Документы утверждают, что

<custom-input v-bind:value="something" v-on:input="something = arguments[0]"></custom-input>

эквивалентно

<custom-input v-model="something"></custom-input>

Вот почему опору для ребенка нужно назвать по значению, и почему ребенок должен $ эмитировать событие с именем input.

Из документации :

В Vue.js отношения родительских и дочерних компонентов могут быть обобщены как подпорки, события вверх. Родитель передает данные потомку через реквизиты, а потомок отправляет сообщения родителю через события. Давайте посмотрим, как они работают дальше.

Как передать реквизит

Ниже приведен код для передачи реквизитов дочернему элементу:

<div>
  <input v-model="parentMsg">
  <br>
  <child v-bind:my-message="parentMsg"></child>
</div>

Как создать событие

HTML:

<div id="counter-event-example">
  <p>{{ total }}</p>
  <button-counter v-on:increment="incrementTotal"></button-counter>
  <button-counter v-on:increment="incrementTotal"></button-counter>
</div>

JS:

Vue.component('button-counter', {
  template: '<button v-on:click="increment">{{ counter }}</button>',
  data: function () {
    return {
      counter: 0
    }
  },
  methods: {
    increment: function () {
      this.counter += 1
      this.$emit('increment')
    }
  },
})
new Vue({
  el: '#counter-event-example',
  data: {
    total: 0
  },
  methods: {
    incrementTotal: function () {
      this.total += 1
    }
  }
})

В дочернем компоненте:

this.$emit('eventname', this.variable)

В родительском компоненте:

<component @eventname="updateparent"></component>

methods: {
    updateparent(variable) {
        this.parentvariable = variable
    }
}

Дочерний компонент

Используйте this.$emit('event_name')для отправки события в родительский компонент.

Родительский компонент

Для того чтобы прослушать это событие в родительском компоненте, мы делаем v-on:event_nameи метод ( ex. handleChange), который мы хотим выполнить для этого события, происходит

Готово :)

Я согласен с ответами о событиях и v-model для вышеупомянутых. Однако я подумал, что опубликую то, что я нашел, о компонентах с несколькими элементами формы, которые хотят отправить обратно своим родителям, так как эта статья кажется одной из первых статей, возвращаемых Google.

Я знаю, что в вопросе указывается один вход, но это кажется самым близким совпадением и может сэкономить людям некоторое время с подобными компонентами vue. Кроме того, никто не упомянул.sync модификатор.

Насколько я знаю, v-model решение подходит только для одного ввода, возвращающего их родителю. Я потратил немного времени на его поиск, но документация Vue (2.3.0) действительно показывает, как синхронизировать несколько реквизитов, отправляемых в компонент, к родителю (конечно, через emit).

Это соответственно называется .sync модификатором.

Вот что говорится в документации :

В некоторых случаях нам может понадобиться «двусторонняя привязка» для опоры. К сожалению, истинное двустороннее связывание может создать проблемы обслуживания, потому что дочерние компоненты могут видоизменить родительский объект, при этом источник этой мутации не будет очевиден как в родительском, так и в дочернем элементах.

Поэтому вместо этого мы рекомендуем генерировать события по схеме update:myPropName. Например, в гипотетическом компоненте с titleпропеллером мы могли бы сообщить о намерении присвоить новое значение с помощью:

this.$emit('update:title', newTitle)

Затем родитель может прослушать это событие и обновить свойство локальных данных, если он этого хочет. Например:

<text-document   
 v-bind:title="doc.title"  
 v-on:update:title="doc.title = $event"
></text-document>

Для удобства мы предлагаем сокращение для этого шаблона с модификатором .sync:

<text-document v-bind:title.sync="doc.title"></text-document>

Вы также можете синхронизировать несколько одновременно, посылая через объект. Проверьте документацию здесь

Более простой способ использования this.$emit

Father.vue

<template>
  <div>
    <h1>{{ message }}</h1>
    <child v-on:listenerChild="listenerChild"/>
  </div>
</template>

<script>
import Child from "./Child";
export default {
  name: "Father",
  data() {
    return {
      message: "Where are you, my Child?"
    };
  },
  components: {
    Child
  },
  methods: {
    listenerChild(reply) {
      this.message = reply;
    }
  }
};
</script>

Child.vue

<template>
  <div>
    <button @click="replyDaddy">Reply Daddy</button>
  </div>
</template>

<script>
export default {
  name: "Child",
  methods: {
    replyDaddy() {
      this.$emit("listenerChild", "I'm here my Daddy!");
    }
  }
};
</script>

Мой полный пример: https://codesandbox.io/s/update-parent-property-ufj4b

Также возможно передавать реквизиты как объект или массив. В этом случае данные будут двусторонне связаны:

(Это отмечено в конце темы: https://vuejs.org/v2/guide/components.html#One-Way-Data-Flow )

Vue.component('child', {
  template: '#child',
  props: {post: Object},
  methods: {
    updateValue: function () {
      this.$emit('changed');
    }
  }
});

new Vue({
  el: '#app',
  data: {
    post: {msg: 'hello'},
    changed: false
  },
  methods: {
    saveChanges() {
        this.changed = true;
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>

<div id="app">
  <p>Parent value: {{post.msg}}</p>
  <p v-if="changed == true">Parent msg: Data been changed - received signal from child!</p>
  <child :post="post" v-on:changed="saveChanges"></child>
</div>

<template id="child">
   <input type="text" v-model="post.msg" v-on:input="updateValue()">
</template>

Правильный путь - $emit()это событие в дочернем компоненте, которое слушает основной экземпляр Vue .

// Child.js
Vue.component('child', {
  methods: {
    notifyParent: function() {
      this.$emit('my-event', 42);
    }
  }
});

// Parent.js
Vue.component('parent', {
  template: '<child v-on:my-event="onEvent($event)"></child>',
  methods: {
    onEvent: function(ev) {
      v; // 42
    }
  }
});

1) Дочерний Compnent: вы можете использовать как это в дочернем компоненте, напишите так: this.formValue для отправки некоторых данных в родительский компонент

this.$emit('send',this.formValue)

2) Parrent Compnenet: и в теге parrent-компонента получают переменную send, например, вот так: и это код для получения данных дочернего компонента в теге родительского компонента.

@send="newformValue"

Другой способ - передать ссылку вашего установщика от родителя в качестве реквизита на дочерний компонент, аналогично тому, как они это делают в React. Скажем, у вас есть метод updateValueна родителе для обновления значения, можно создать экземпляр компонента ребенка следующим образом: <child :updateValue="updateValue"></child>. Тогда на ребенке вы будете иметь соответствующую опору: props: {updateValue: Function}и в шаблоне вызова метода при изменении входного: <input @input="updateValue($event.target.value)">.

Я не знаю почему, но я только что успешно обновил родительские данные, используя данные в качестве объекта, :setиcomputed

Parent.vue

<!-- check inventory status - component -->
    <CheckInventory :inventory="inventory"></CheckInventory>

data() {
            return {
                inventory: {
                    status: null
                },
            }
        },

Child.vue

<div :set="checkInventory">

props: ['inventory'],

computed: {
            checkInventory() {

                this.inventory.status = "Out of stock";
                return this.inventory.status;

            },
        }

его пример расскажет вам, как передать входное значение родителю при нажатии кнопки «Отправить».

Сначала определите eventBus как новое Vue.

//main.js
import Vue from 'vue';
export const eventBus = new Vue();

Pass your input value via Emit.
//Sender Page
import { eventBus } from "../main";
methods: {
//passing data via eventbus
    resetSegmentbtn: function(InputValue) {
        eventBus.$emit("resetAllSegment", InputValue);
    }
}

//Receiver Page
import { eventBus } from "../main";

created() {
     eventBus.$on("resetAllSegment", data => {
         console.log(data);//fetching data
    });
}

Я думаю, что это добьется цели:

@change="$emit(variable)"