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

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