vue v-model在父子组件之间的运用

定义了一个table的子组件，声明props；父组件有数据源和数据列，通过props传入到子组件中。子组件的table有编辑功能，就意味着props的dataSource能被修改，接着dataSource又返回给父组件，进行提交或另作他用，那么如何实现呢？

这里就要用到v-model，在Vue 3.4+版本中，通过defineModel，很容易实现，我现在的vue版本为"vue": "3.2.37",所以得通过另一种方式实现，具体代码如下。

一、子组件：

const props = defineProps({
    columns: { type: Object, default: [] },
    dataSource: { type: Array, default: [] },
  });
const emit = defineEmits(['update:dataSource']);
const editData = ref([]);
  onMounted(() => {
    setTimeout(() => {
      if (props.columns && props.dataSource && props.dataSource.length > 0) { 
        editData.value = JSON.parse(JSON.stringify(props.dataSource)); //深拷贝
      }
    }, 500);
  });

通过defineProps、defineEmits配置要双向绑定的属性，所以update后面的属性名称必须和prop中的属性名称相同。下面实现update的代码：

 function handleInputChanged(value, rowIdx, colName) {
    for (let i in editData) {
      if (parseInt(i