时间戳

首页 > 解决方案 > VueJS：为什么当孩子触发自定义事件时，父母的数据属性没有更新？

vue.js - VueJS：为什么当孩子触发自定义事件时，父母的数据属性没有更新？

问题描述

在下面的代码中，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
}

谢谢

标签： vue.jsvue-component

解决方案

注意：在单个文件设置中这有效，但在下面使用模板标签的设置中无效。不确定，为什么？

这在文档中进行了解释：

事件名称

与组件和道具不同，事件名称永远不会用作 JavaScript 中的变量或属性名称，因此没有理由使用 camelCase 或 PascalCase。此外，v-onDOM 模板中的事件侦听器将自动转换为小写（由于 HTML 不区分大小写），因此v-on:myEvent会变成v-on:myevent- 使 myEvent 无法侦听。

由于这些原因，我们建议您始终使用 kebab-case 作为事件名称。

推荐阅读