Как отправить обновленные значения из родительского компонента в дочерний компонент в Vue JS?

Я передаю переменную от родительского компонента к дочернему компоненту через реквизиты. Но с некоторой операцией значение этой переменной меняется, т.е. Нажатие какой-либо кнопки в родительском компоненте, но я не знал, как передать это обновленное значение дочернему? предположим, что значение одной переменной вначале ложно, и в родительском компоненте есть кнопка "Редактировать". Я изменяю значение этой переменной при нажатии кнопки "Изменить" и хочу передать обновленное значение от родительского к дочернему компоненту.

Ответ 1

Значение вашего свойства должно обновляться динамически при использовании реквизита между родительским и дочерним компонентами. Исходя из вашего примера и исходного состояния свойства, равного false, возможно, что значение не было должным образом передано в дочерний компонент. Пожалуйста, подтвердите, что ваш синтаксис правильный. Вы можете проверить здесь для справки.

Однако, если вы хотите выполнять набор действий при каждом изменении значения свойства, вы можете использовать наблюдатель.

EDIT:

Вот пример использования как реквизитов, так и наблюдателей:

HTML

<div id="app">
    <child-component :title="name"></child-component>
</div>

JavaScript

Vue.component('child-component', {
  props: ['title'],
  watch: {
    // This would be called anytime the value of title changes
    title(newValue, oldValue) {
      // you can do anything here with the new value or old/previous value
    }
  }
});

var app = new Vue({
  el: '#app',
  data: {
    name: 'Bob'
  },
  created() {
    // changing the value after a period of time would propagate to the child
    setTimeout(() => { this.name = 'John' }, 2000);
  },
  watch: {
    // You can also set up a watcher for name here if you like
    name() { ... }
  }
});

Ответ 2

Вы можете наблюдать переменную (props) с помощью vue watch.

например:

<script>
export default {
  props: ['chatrooms', 'newmessage'],
  watch : {
    newmessage : function (value) {...}
  },
  created() {
    ...
  }
}
</script>

Я надеюсь, что это решит вашу проблему. :)

Ответ 3

Вы можете использовать Dynamic Props.

Это будет динамически передавать данные от родителя к дочернему компоненту по вашему желанию.