vue子组件父组件数据绑定

父组件

父组件只需要使用v-model绑定数据，如图

export default {
  name: "bar-setting",
  props:{
    data:Object
  },
  components:{
    bgGradients,
  },
  data(){
    return{
      bgDataMsg:{
        colorBegin:'',
        colorEnd:'',
      }
  }
}

子组件

子组件需要从父组件获取数据

 props:{
    value:[Object], //设置为父组件的数据类型
 }, 

在组件上绑定数据

<template>
    <div class="bg-Gradients clearfix">
        <div class="fl colorpickerTop">
            <ColorPicker v-model="value.colorBegin" @on-change="setBarBg"/>
            <Input v-model="value.colorBegin" placeholder="Enter something..." style="width: 126px" @on-change="setBarBg"></Input>
        </div>
        <div class="fl">
            <ColorPicker v-model="value.colorEnd" @on-change="setBarBg"/>
            <Input v-model="value.colorEnd" placeholder="Enter something..." style="width: 126px" @on-change="setBarBg"></Input>
        </div>
    </div>
</template>

然后数据改变时，执行父组件相应的方法，就ok了

methods: {
  setBarBg(){
    this.$emit('bgDataChage')
  },
}