Блог

Когда я изменяю значение props (Boolean) в родительском компоненте Vue, дочерний компонент не обновляется, чтобы вызвать открытие модального параметра.

В моем родительском компоненте событие click изменяет значение openModal с false на true. Затем это значение передается через prop дочернему компоненту. В этом дочернем компоненте обновленное логическое значение должно затем добавить класс через привязку класса к div, который в свою очередь открывает модальный.

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

 <FilmListItem
      v-for="slice in slices"
      @click.native="openModal=true"
    />

<child-component :modal="openModal">
...

data() {
  return {
    openModal: false
  }
}
  

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

 <div
    class="modal__container"
    :class="{ 'modal--show': showModal }">
...
export default {
  props: {
    modal: Boolean
  },
  data() {
    return {
      showModal: this.modal
    }

In the vue dev tools I can see, that the value of the prop changes in the parent. Yet, my child component doesn't update. It worked when I forced the child component to reload when I was assigning a new :key value together with changing the Boolean. But that feels a little hacky to me. Also, a watcher within the child component didn't do the trick. It simply wouldn't watch the changed prop value. Any ideas very much appreciated. Thanks in advance.
  

На самом деле я сам нашел решение прямо сейчас:

В дочернем компоненте я пытался получить доступ к данным props через объект data. Но я просто получил доступ к данным props напрямую, вот так:

 <div   
  :class="{ 'modal--show': modal }"> 
...

export default {   
  props: {
    modal: Boolean 
  } 
}
  

Правильно.

Другие варианты синхронизации, если это отношение родитель / потомок более сложное, или вам нужно было передать обратно родительскому:

• Поместите значение :modal в хранилище Vuex и используйте вычисляемое свойство дочернего компонента.

• Используйте EventBus:https://alligator.io/vuejs/global-event-bus /