У меня есть родительский Vue, который включает или отключает режим «редактирования». В режиме без редактирования все компоненты доступны только для чтения.

Я реализовал это через объект данных, и все работает отлично.

Я выделил некоторые компоненты в дочерних компонентах.

От родителя отправляется сообщение $ emit с новым состоянием режима редактирования:

  methods: {
    toggleMode () {
      this.editMode = !this.editMode
      this.$emit('edit-mode-change', this.editMode)
    }

Используя Vue DevTools, я вижу, что сообщение отправлено.

Тем не менее, я не могу получить его в моем дочернем компоненте! Я посмотрел документы, но ни один из примеров не соответствует этому случаю. Это то, что у меня есть ( в дочернем компоненте ):

 methods: {
   onEditModeChange: function (mode) {
     console.log('mode is', mode)
     this.editMode = mode
   }

Также попробовал:

 events: {
   onEditModeChange: function (mode) {
     console.log('mode is', mode)
     this.editMode = mode
   }

Плюс я получаю ошибку консоли браузера следующим образом:

[Vue warn]: Invalid handler for event "edit-mode-change": got false 
(found in <Dimensions> at /home/anthony/Projects/Towers-Vue/src/components/assets/Dimensions.vue)

Я уверен, что делаю что-то не так, но документы не ссылаются на блок events: {}, но я видел это в другом коде. Также это не показывает, как реализовать слушателя.

Спасибо, что нашли время, чтобы просмотреть этот пост, если вы можете указать мне в правильном направлении, это очень ценится.

0
Anthony 25 Апр 2017 в 05:46

2 ответа

Лучший ответ

В Vue 2 события текут только сбоку или вверх, а не вниз.

То, что вы действительно хотите, это просто передать опору в ваши компоненты.

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

toggleMode () {
    this.editMode = ! this.editMode;
}

В родительском шаблоне:

<child-component-1 :editMode="editMode"></child-component-1>
...same for others...

Затем просто примите editMode в качестве опоры в каждом из ваших дочерних компонентов:

{
    props: ['editMode']
}

Теперь вы можете использовать editMode в шаблоне вашего ребенка. Он будет отслеживать editMode родителя, поэтому нет необходимости в ручных событиях / наблюдателях.

1
Joseph Silber 25 Апр 2017 в 02:53

Vue2 работает, когда поток данных в одном направлении от родительского к дочернему, так что в родительском компоненте вы можете иметь

<template>
 <child-component :isEditing="editMode"></child-component>
</template>

<script>

export default {
    methods: {
        toggleMode () {
          this.editMode = !this.editMode
          this.$emit('edit-mode-change', this.editMode)
        }
    }
}

А в дочернем компоненте вы используете реквизит, чтобы получить данные

Vue.component('child-component', {
  props: ['isEditing'],
  template: '<span>edit mode: {{ isEditing }}</span>'
})

У нас есть режим редактирования для ребенка. Теперь, если вы хотите отправить данные от потомка к родителю, тогда потомок должен «излучать» сигнал родителю, поскольку реквизиты «только для чтения»

В дочернем компоненте вы делаете в любой момент

someMethod() {
    this.$emit('editDone', dataEdited);
}

И в родительском компоненте вы «перехватываете» сообщение, используя on:

<template>
    <child-component 
        :isEditing="editMode"
        @editDone="someParentMethod"></child-component>
</template>

Приветствую!

1
Gerardo Rosciano 25 Апр 2017 в 02:58