如何在自定義組件中使用v-bind？

Question

根據商務部，

<input v-model="something">是一樣的：

<input 
v-bind:value="something" 
v-on:input="something = $event.target.value"> 

，所以我嘗試以下，它的工作原理：

<input v-model='sample'> 
<input v-bind:value='sample' v-on:input="sample = $event.target.value" >  

現在，當我想在一個自定義組件相同，它會觸發一個錯誤：

VM99:2Uncaught TypeError: Cannot read property 'value' of undefined

jsFiddle here

我在這裏錯過了什麼讓它工作？謝謝。

Answer 1

您在input事件處理程序中發出input事件。

所以出現這種情況這裏的問題是：

1. 首先input當你在<input>

   input: function(event) { 
       self.$emit("input", event.target.value) // 2 
   } 
   

   您發出輸入目標元素的值類型。

2. 二EMIT是由處理器本身造成的，

   input: function(event) { 
       /* the value of event is no longer a DOM el 
       instead it is a string value which doesn't have a target property 
       it throws an error on the console. */ 
   
       self.$emit("input", event.target.value) 
   } 
   

   Uncaught TypeError: Cannot read property 'value' of undefined

這裏是工作fiddle。

編輯

此外，在組件的HTML，你期待$event具有target進一步應該有一個value財產。

self.$emit("input", event.target.value) 

在這裏你正在發出一個值，因此它不起作用。