VueJS親にメッセージを送信しない

Question

私は子コンポーネントと親コンポーネントについて多くの知識がありません。子供の値を変更しようとしていますが、親に値を送信してどこかに表示することはできますが、 、値を出さない。

これは、に変更する必要があります。誰もがこのコードを見て、何が間違いで教えてもらえます親

からこんにちは子から

{{ message }}？

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

変更するには：：私はあなたがあれば、小文字の単一の単語を使う意味

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

あなたのコードで

Vue.component('child1', { 
 
\t template: '<p @click="runMe">{{ display }}</p>', 
 
    props: ['display'], 
 
    data: { 
 
    \t display: '' 
 
    }, 
 
    methods: { 
 
    \t runMe() { 
 
    \t this.display = "Hello from child" 
 
\t \t \t this.$emit("changeMessage", this.display) 
 
    }  
 
    } 
 
}) 
 

 
new Vue({ 
 
\t el: "#app", 
 
    data: { 
 
    \t message: "Hello 2" 
 
    },  
 
    methods: { 
 
    \t messageRun() { 
 
\t \t \t this.message = "Change By" 
 
    } 
 
    } 
 
})

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

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

Answer 1

あなたが発するところ、これを持っていますcamelCase vueを使用してそれをchange-messageに変換しますが、これは属性では受け入れられませんが、私はあなたのコードでこれを試しました。

変更後これは、次の操作を行います。

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