Wie verwende ich V-bind in einer benutzerdefinierten Komponente?

Question

Nach dem doc,

<input v-model="something"> ist die gleiche wie:

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

so habe ich versucht, folgende und es funktioniert:

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

jetzt, wenn ich das gleiche in einer benutzerdefinierten Komponente versucht, es löst einen Fehler aus:

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

jsFiddle here

Was fehlt mir hier, damit es funktioniert? Vielen Dank.

Answer 1

Sie geben ein input Ereignis in einem input Ereignishandler aus.

Also das Problem, das hier geschieht, ist:

1. Erste input, wenn Sie in den <input>

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

   Sie den Wert Eingangselement mit dem Ziel emittieren geben.

2. Zweite emit wird vom Handler selbst verursacht,

   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

Hier ist der Arbeits fiddle ist.

EDIT

Auch in Ihrer Komponente HTML, Sie erwarten $event eine target zu haben, die weiterhin eine value Eigenschaft haben sollte.

Hier emittieren Sie einen Wert daher würde es nicht funktionieren.