VUE自定义控件值改变，父控件跟着变

自定义控件

export default {
  name: 'CustomIcon',
  props: {
    // 定义组件属性
    value: {
      type: String,
      required: false
    },
    style: {
      type: String,
      required: false
    },
    canSelect: {
      type: Boolean,
      required: false
    },
    size: {
      type: Number,
      required: false
    },
    color: {
      type: String,
      required: false
    },
    changeValue:{//通知父控件值变
      type: Function ,
      required: false
    }

  },
  setup(props) {
    const value = ref(props.value);
    const size = ref(props.size);
    const color = ref(props.color);
    const style = ref(props.style);
    const canSelect = ref(props.canSelect);
    const buttonRef = ref();
    const popoverRef = ref();
    const iconList = reactive ([
      "Plus","WindPower"
    ])
    if(style.value==null){
      style.value = {};
    }
    style.value.cursor = 'pointer';   
    style.value.verticalAlign = 'middle';
    if(size.value>0){
      style.value.fontSize = size.value+'px';
    }
    //打开选择
    function openSelect() {
      console.log("openselect");
    }
    //选择确定
    const onSelect = function(icon){
      console.log(icon);
      value.value = icon;
      if(props.changeValue){
        props.changeValue(icon);//掉用方法更改父控件值
      }
    }
    
    return {
      value,
      canSelect,
      openSelect,
      onSelect,
      buttonRef,
      popoverRef,
      style,
      iconList,
      size,
      color,
    };
  }
};

父控件调用

<el-form-item label="图标">
       <CustomIcon :value="form.icon" :changeValue="function(d){form.icon=d}" canSelect="true" size="20" />
 </el-form-item>

思路就是父控件准备一个方法来改变自己的值，子控件负责调用，自定义子控件只需参考，25行和第59行代码