от
В следующем коде демо codePen здесь дочерний компонент генерирует пользовательское событие
changedMsg
для родительского, которое изменяет свойство данных
msg
в родительском компоненте. Не уверен, почему
changedMsg
не работает. Он не изменяет свойство
msg
родительского элемента. Примечание. В настройках одного файла это работает, но не в настройках ниже, где используется тег
template
. Не уверен, почему? VueJS
var child = {
  template: '#child',
  props: ['parentMsg'],
   methods: {
     changeParentMsg() {
       console.log(this.parentMsg)
       this.parentMsg = 'Message was changed by CHILD'
       this.$emit('changedMsg', this.parentMsg)
     }
   }
}

new Vue({
  el: '#parent',
  data() {
    return {
      msg: 'Hello World'
    }
  },
  components: {
    child
  },

  methods: {
      changeMsg() {
        this.msg = 'Changed Own Msg'
      }
  },

})
HTML
  
    Parent
    {{ msg }}

  
  
Child
CSS
#parent {
  background

Спасибо
    

        

Ваш ответ

Отображаемое имя (по желанию):
Конфиденциальность: Ваш электронный адрес будет использоваться только для отправки уведомлений.
Анти-спам проверка:
Чтобы избежать проверки в будущем, пожалуйста войдите или зарегистрируйтесь.

2 Ответы

0 голосов
от
  Примечание. В настройках с одним файлом это работает, но не в настройках ниже, где используется тег шаблона. Не уверен, почему? Это объясняется в документации: Имена событий   В отличие от компонентов и реквизитов, имена событий никогда не будут использоваться как имена переменных или свойств в JavaScript, поэтому нет причин использовать camelCase или PascalCase. Кроме того, прослушиватели событий
v внутри шаблонов DOM будут автоматически преобразованы в строчные (из-за нечувствительности к регистру в HTML), поэтому v станет VvjDbN4IeyLmqMpZKF4I, что сделает невозможным прослушивание.
  
  По этим причинам мы рекомендуем всегда использовать kebab-case для имен событий.

    
0 голосов
от
Так что не стоит делать логику в директиве listem, я сделал это и работал:
...