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>

如何获取我在父组件中拾取的颜色？此组件可在父级中多次使用。

如何使用颜色选择器组件中选择的值更新父级？

我遇到了Bret建议的问题：

我正在使用颜色选择器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

eval它。

$emit

默认情况下，<input type="text" v-model="color" @input="$emit('input', $event.target.value)" class="form-control"/>会侦听v-model个事件。但这也可以定制。这包含在文档here中。

为了在input更改颜色时另外设置颜色，请从colorpicker事件中发出值。

changeColor

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

1 个答案: