vue js 2ネストされたコンポーネントのインスタンスに "value"プロパティまたはメソッドが定義されていません

Question

ネストされたコンポーネントをテストするための基本的なvue js 2の基本的な例を書きました。

以下はコンポーネントとテンプレート構造です。

Vue.component('form-com', { 
 
     template: '#form', 
 
     props: ['value'], 
 
     methods: { 
 
      onInput: function (event) { 
 
       this.$emit('input', event.target.value); 
 
      } 
 
     } 
 
    }); 
 

 
    Vue.component('message-com', { 
 
     template: '#message', 
 
     data: function() { 
 
      return { 
 
       msg: 'Hello' 
 
      } 
 
     }, 
 
     props: ['user'] 
 
    }); 
 

 
    Vue.component('welcome-com', { 
 
     template: '#welcome', 
 
     data: function() { 
 
      return { 
 
       user: 'ahmad' 
 
      } 
 
     } 
 
    }); 
 

 
    new Vue({ 
 
     el: '#container' 
 
    })

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script> 
 

 
<!--Form Template--> 
 
<template id="form"> 
 
    <div> 
 
     <div class="form-control"> 
 
      <label>Enter Your Name:</label> 
 
      <input type="text" v-bind:value="value" :input="onInput"> 
 
     </div> 
 
    </div> 
 
</template> 
 

 
<!--Hello Message Template--> 
 
<template id="message"> 
 
    <div> 
 
     <h3>{{msg}} {{user}}</h3> 
 
    </div> 
 
</template> 
 

 
<template id="welcome"> 
 
    <div> 
 
     <form-com :value="value"></form-com> 
 
     <br> 
 
     <message-com :user="user"></message-com> 
 
    </div> 
 
</template> 
 

 
<div id="container"> 
 
    <welcome-com></welcome-com> 
 
</div>

しかし、ブラウザでアプリケーションを実行すると、このエラーが表示されます。

[Vue warn]: Property or method "value" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. 

found in 

---> <WelcomeCom> 
     <Root> 

問題は何ですか？

更新：

私はちょうどLearning Vue.js 2の章のいずれかからthis Fiddleを書き換えます。私はいくつかのパラメータとコンポーネント名とテンプレート名の名前を変更します。しかし私がメインのフィドルを自分のコードにコピーすると、すべてのことがうまくいった。あなたのコンポーネント「歓迎コム」valueオブジェクトに

Answer 1

とwatcherを設定します入力の変化を観察して、変化が起こった親のコモニティーを引き起こすcustom-eventを発する。

Vue.component('form-com', { 
     template: '#form', 
     data(){ 
      return{ 
       myInput:'' 
      } 
     }, 
     watch: { 
      myInput: function (inputVal) { 
       this.$emit('input', inputVal); 
      } 
     } 
    }); 

    Vue.component('message-com', { 
     template: '#message', 
     data: function() { 
      return { 
       msg: 'Hello' 
      } 
     }, 
     props: ['user'] 
    }); 

    Vue.component('welcome-com', { 
     template: '#welcome', 
     data: function() { 
      return { 
       user: 'ahmad' 
      } 
     }, 
     methods:{ 
      updateUser(value){ 
       this.user = value; 
      } 
     } 
    }); 

    new Vue({ 
     el: '#container' 
    }) 

あなたは子コンポーネントが使用されている親テンプレート（**歓迎コンポーネント）に直接v-on:inputや速記@inputを使用して、子フォーム-COM **コンポーネントから放出されたイベントに耳を傾けることができます。

あなたは、あなたがcomputed setterを使用してそれを行うことができウォッチャーを使用しない場合はここで

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script> 

<!--Form Template--> 
<template id="form"> 
    <div> 
     <div class="form-control"> 
      <label>Enter Your Name:</label> 
      <input type="text" v-model="myInput"> 
     </div> 
    </div> 
</template> 

<!--Hello Message Template--> 
<template id="message"> 
    <div> 
     <h3>{{msg}} {{user}}</h3> 
    </div> 
</template> 

<template id="welcome"> 
    <div> 
     <form-com @input="updateUser($event)" ></form-com> 
     <br> 
     <message-com :user="user"></message-com> 
    </div> 
</template> 

<div id="container"> 
    <welcome-com></welcome-com> 
</div> 

HTMLはjsFiddle

です。計算されたセッターを使用しているfiddleを見てください

Answer 2

が欠落している：あなたは、入力値をバインドしv-modelを設定することができ、あなたのフォームコムコンポーネントで

Vue.component('welcome-com', { 
     template: '#welcome', 
     data: function() { 
      return { 
       value: '', 
       user: 'ahmad' 
      } 
     } 
    });