如何在父組件中使用可修改的子組件？

Question

這是我簡單的組件：

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

它被髮起這樣的：

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

我怎麼回去，我在父母拾起的元件內部的顏色？家長可以多次使用該組件。

如何讓父母更新顏色選取器組件中拾取的值？

我碰到的一個問題，佈雷特的建議：

恰好是我使用顏色選擇器中安裝一個jQuery插件，所以我必須做這裏面什麼：

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

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

    }, 

我上changeColor註冊事件監聽器並將其與顏色數據屬性連接起來。這工作正常輸入得到正確的值和this.color得到正確的價值，但問題是，如果我通過使用顏色選擇器插件選擇顏色值它不會廣播給父母，只有當我親手看到它，或者如果我在使用顏色選擇器挑選它之後，在已經存在的值的末尾添加一個空格，那麼它會正確返回父級。

Answer 1

$emit它。

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

默認情況下，v-model偵聽的input事件。但是這也可以定製。這包括在文檔here中。

爲了在colorpicker更改顏色時額外設置顏色，請從changeColor事件中發出值。

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