Wie kann ich einen in einer untergeordneten Komponente geänderten Wert dem übergeordneten Element zur Verfügung stellen?

Question

Dies ist meine einfache Komponente:

<color-picker v-model="imageBackground"></color-picker> 

Wie kann ich wieder die Farbe bekommen, die ich innerhalb der Komponente in den Eltern ausgewählt habe:

<template> 
    <div class="input-group colorpicker-component"> 
     <input type="text" v-model="color" class="form-control"/> 
     <span class="input-group-addon"><i></i></span> 
    </div> 
</template> 

<script> 
    export default { 
     props: { 
      value: {type: String}, 
     }, 
     data() { 
      return { 
       color: this.value, 
      } 
     }, 
     mounted: function() { 
      var self = this 
      $(self.$el).colorpicker() 
     }, 
     beforeDestroy: function() { 
      $(this.$el).colorpicker('hide').colorpicker('destroy') 
     } 
    } 
</script> 

es so wird initiiert? Diese Komponente kann viele Male in Eltern verwendet werden.

Wie kann ich das Elternelement mit dem in der Farbauswahlkomponente ausgewählten Wert aktualisieren?

Ich habe ein Problem mit Bret Vorschlag laufen:

Was ich Farbauswahl ein jQuery-Plugin, also muss ich diese innen tun montiert bin mit ist passiert:

mounted: function() { 
     var self = this 
     $(self.$el).colorpicker() 

     $(self.$el).on('changeColor', function(event) { 
      self.color = $(self.$el).colorpicker('getValue') 
     }) 

    }, 

ich auf changeColor registrieren Ereignis-Listener und verdrahten es mit Farbdaten-Eigenschaft. Das funktioniert gut, die Eingabe erhält den richtigen Wert und this.color erhält den richtigen Wert, aber das Problem ist, dass wenn ich Farbwert mit Color Picker Plugin auswählen wird es nicht an die Eltern gesendet wird, Eltern sieht es nur, wenn ich es von Hand eingeben oder wenn ich, nachdem ich es mit der Farbauswahl ausgewählt habe, ein Leerzeichen am Ende des bereits vorhandenen Wertes hinzufüge, dann wird es korrekt wieder zum Elternteil zurückkehren.

Answer 1

$emit es.

<input type="text" v-model="color" @input="$emit('input', $event.target.value)" class="form-control"/> 

hört standardmäßig v-model für ein input Ereignis. Aber das kann auch angepasst werden. Dies wird in der Dokumentation here behandelt.

Um die Farbe zusätzlich zu setzen, wenn colorpicker die Farbe ändert, geben Sie den Wert changeColor aus.

$(self.$el).on('changeColor', function(event) { 
    self.color = $(self.$el).colorpicker('getValue') 
    self.$emit('input', self.color) 
})