0

由于某种原因,发出的事件不被父组件处理

HTML:

<template id="parent-template">
  <div>
    <h1>Parent: {{message}}</h1>
    <child-component message="Child message"></child-component>
  </div> 
</template>    
<template id="child-template">
  <div>
    <h2>Child: {{message}}</h2>
    <button v-on:click="changeMessage('Changed')">Change</button>
  </div> 
</template>

<div id="app"> 
  <parent-component message="Parent message"></parent-component>
</div>

JS(es5):

孩子:

Vue.component("child-component", {
  template: "#child-template",
  props:['message'],
  methods:{
    changeMessage: function(newMessage){
      this.message = newMessage;
      this.$emit("message-changed", newMessage); 
    }
  }
});

家长:

Vue.component("parent-component", {
  template: "#parent-template",
  props:['message'],
  mounted: function(){
    var v = this;
    this.on("message-changed", function(newValue){
      alert("Emit handled!");
      v.message = newValue;
    });
  }
});

所以,一切看起来都很好,但是当事件触发时什么也没有发生。为什么?

4

1 回答 1

0

您无法检查已挂载函数上发出的事件,因为子 Vue 实例此时并未实例化。如果您想在所有内容都被渲染之后运行代码,这就是我假设您之后的内容,那么您需要在打勾后运行代码。

this.$nextTick(function () { // Your code goes here }

另外,为了清楚起见,我通常会v-on:message-changed="parentMethod()"在 HTML 内部做一个。这样,父组件就不会与已安装的子组件紧密耦合。

<child-component v-on:message-changed="parentMethod()"> </child-component>

以下是关于我提供的已安装信息的 Vue 文档: https ://vuejs.org/v2/api/#mounted

于 2019-09-16T15:14:37.047 回答