Question

子级组件向父级发出自定义事件element.currentTime，这会更改父级组件上的changedMsg数据属性。不确定为什么msg不起作用。它不会修改父级的changedMsg属性。

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

VueJS

template

HTML

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'
      }
  },

})

CSS

  <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>

谢谢

Answer 1

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

在文档中对此进行了解释：

Event Names

与组件和道具不同，事件名称永远不会在JavaScript中用作变量或属性名称，因此没有理由使用camelCase或PascalCase。此外，DOM模板中的item_id事件监听器将自动转换为小写字母（由于HTML不区分大小写），因此v-on会变成v-on:myEvent –使得myEvent无法监听。
由于这些原因，我们建议您始终使用kebab-case作为事件名称。

Answer 2

所以，对listem事件指令进行逻辑化不是一个好习惯，我这样做是行得通的：

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

在子标签上，我将@changedMsg更改为kebab-case，所以现在它是@ changed-msg，并使其调用了一个函数，而不是在子标签上执行了名为msgChanged的逻辑，因此您需要在子标签上创建它您的方法部分：

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

希望有帮助

VueJS：为什么在子级上触发自定义事件时，父级的data属性没有更新？

2 个答案: