Может ли директива v-on напрямую изменять свойство data () родительского объекта? - PullRequest
Новая
       16

Может ли директива v-on напрямую изменять свойство data () родительского объекта?

0 голосов
/ 29 сентября 2018

У меня есть приложение, которое имеет дочерние компоненты Vue.

Компоненты передают данные родителю через this.$emit (numberchnaged ниже), который перехватывается на родительском уровне директивой v-on (или @), которая, в свою очередь, запускаетметод.

Затем этот метод обновляет свойство data() родительского объекта: 

<template>
      (...)
      <Users @numberchanged="doNumCh"></Users>
      (...)
</template>

<script>
(...)
export default {
  components: {
          Users
  },
    data() {
      return {
          u: "hello"
      }
    },
    methods: {
      doNumCh(value) {
          this.u = value
      }
    }
}
</script>

Это решение работает, но достаточно многословно для простого обновления this.u отправленным <Users>назад.

Есть ли способ сделать обновление прямо в теге <Users> , что-то вроде 

<Users @numberchanged="u=theValueReturedByUsers"></Users>

Моя проблема в том, что я делаюне знаю, как извлечь theValueReturedByUsers, я получаю его только в методе как value (в моем примере выше).

Ответы [ 3 ]

0 голосов
/ 29 сентября 2018

Если вам не нужно обрабатывать после обработки просто новое значение данных, вы можете сделать это следующим образом (без записи метода в parent) с помощью переменной $event, которая содержит возвращаемое значение (Object или литерал переменной).) из дочернего компонента: 

 <users @numberchanged="{u=$event}"></users>

Примечание не используйте заглавные буквы в именах бализа, таких как Users

0 голосов
/ 29 сентября 2018

Функционально, вы ищете поведение v-model для вашего компонента.Vue предусматривает для этого .Таким образом, вы можете сказать 

<template>
      (...)
      <Users v-model="u"></Users>
      (...)
</template>

, который является аккуратным представлением, пока ваш Users компонент (примечание: вы всегда должны иметь дефис в именах пользовательских компонентов ) принимаетvalue параметр и $emit s входное событие.

См. Также v-bind.sync для работы с реквизитами, отличными от value.

0 голосов
/ 29 сентября 2018

Полезная нагрузка доступна через $event.

Для приведенного выше кода решение, следовательно, будет 

<Users @numberchanged="u=$event"></Users>
...