VueJS: Почему свойство данных родителя не обновляется, когда пользовательское событие генерируется при дочернем пожаре? - PullRequest
Новая
       16

VueJS: Почему свойство данных родителя не обновляется, когда пользовательское событие генерируется при дочернем пожаре?

1 голос
/ 04 июля 2019

В следующем коде демо 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 

  <div>
    <h4>Parent</h4>
    <p>{{ msg }}</p>

  <button @click="changeMsg">Change Own Message</button>
  <br>
    <div class="child">
      <h4>Child</h4>
<child :parentMsg="msg" @changedMsg= "msg = $event"></child>
      </div>
</div>
  </div>


<template id="child">
  <div>
    <button @click="changeParentMsg">Change Parnets msg</button>
  </div>
</template>

CSS 

#parent {
  background-color: lightblue;
  border: 2px solid;
  width: 300px;
}

.child {
  background-color: lightgray;
  border: 2px solid;
  margin-top: 20px
}

Спасибо

Ответы [ 2 ]

2 голосов
/ 04 июля 2019

Примечание: в настройках с одним файлом это работает, но не в настройках ниже, где используется тег шаблона. Не уверен, почему?

Это объясняется в документации:

Имена событий

В отличие от компонентов и реквизитов, имена событий никогда не будут использоваться как имена переменных или свойств в JavaScript, поэтому нет причин использовать camelCase или PascalCase. Кроме того, v-on прослушиватели событий внутри шаблонов DOM будут автоматически преобразованы в строчные (из-за нечувствительности к регистру в HTML), поэтому v-on:myEvent станет v-on:myevent - что делает myEvent невозможным для прослушивания.

По этим причинам мы рекомендуем вам всегда использовать kebab-case для имен событий .

1 голос
/ 04 июля 2019

Так что не рекомендуется создавать логику для директивы события listem, я сделал так и работал: 

<child :parentMsg="msg" @changed-msg="msgChanged"></child>
  </div>
</div>

для дочернего тега, я изменил @changedMsg на kebab-case, тактеперь он @ change-msg и заставил его вызывать функцию вместо логики дочернего тега, функцию с именем msgChanged, поэтому вам нужно создать ее в разделе методов: 

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

надеюсь, что это поможет

...