Question

我对儿童和父母组件的了解并不多，我只是简单地尝试改变孩子的价值，然后将价值发给父母，这样我就可以在某处显示，但看起来不行，不发出值。

这应该改为：孩子的问候

Vue.component('child1', { template: '<p @click="runMe">{{ display }}</p>', props: ['display'], data: { display: '' }, methods: { runMe() { this.display = "Hello from child" this.$emit("changeMessage", this.display) } } }) new Vue({ el: "#app", data: { message: "Hello 2" }, methods: { messageRun() { this.message = "Change By" } } })来自家长

任何人都可以查看此代码并告诉我什么是错误吗？

＆＃13;

.btnMain {
  display: block;
  background: #ccc;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.2/vue.min.js"></script>
<div id="app">

    <button @click="messageRun" class="btnMain">Click Here</button>
    <child1 :display="message" @changeMessage="message = $event"></child1>
    <hr>
    {{ message }} From Parent
</div>

＆＃13;

window.onbeforeunload = function () {
    //localStorage saving here
    return null; //Will not halt the unload from happening
}

＆＃13;

Answer 1

在您的代码中，您可以在这里发出：

this.$emit("changeMessage", this.display)

更改为：

this.$emit("newmessage", this.display)

我的意思是使用小写单个单词，如果你使用camelCase vue将它转换为change-message但属性不能接受，我在你的代码上尝试了这个。

更改后，请执行以下操作：

<child1 :display="message" @newmessage="message = $event"></child1>

VueJS不向父级发送消息

1 个答案: