屬性或方法「value」未在vue js 2實例中定義嵌套組件

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。我只是重命名一些參數和組件和模板名稱。但是當我將主要的小提琴複製到我的代碼時，所有的東西都奏效了。

Answer 1

在你形式-COM組件，您可以建立一個v-model結合的輸入值，併成立了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' 
    }) 

你可以聽從孩子形式-COM發出的事件**直接在子組件使用父模板（**歡迎分量）使用v-on:input或簡寫@input組件。

HTML

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

這裏是jsFiddle

如果你不想使用觀察者，那麼你可以使用computed setter做到這一點。看看fiddle這是使用計算機設置器

Answer 2

你缺少在組件「歡迎-com公司的value對象：

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