Vue【從無到有從有到無】【F2】父子組件雙向綁定

父一級組件

<template>
    <student-base-info v-model="formData" />
</template>

<script>
import StudentBaseInfo from "../components/StudentBaseInfo";
export default {
    components: {StudentBaseInfo},
    data() {
        return {
            formData: {}
        }
    }
}
</script>

父二級組件

<template>
  <div class="student-base-info">
       <zy-tec-form-field-show v-model="formData"/>
  </div>
</template>

<script>
import ZyTecFormFieldShow from "./ZyTecFormFieldShowComponent";
export default {
    name: 'StudentBaseInfo',
    components: {ZyTecFormFieldShow},
    props: {
      formData: {
        type: Object,
        required: true
      },
    },
    model: {
      prop: 'formData',
      event: 'syncData'
    },
    methods: {
      syncData() {
        this.$emit('input', this.value)
      },
    },
}
</script>

子組件

<template>
    <div class="form-field-show">
        <el-form :model="formData" />
    </div>
</template>

<script>
export default {
    name: 'ZyTecFormFieldShowComponent',
    componentName: 'ZyTecFormFieldShow',
    props: {
      formField: {
        type: Array,
        required: true
      },
    },
    model: {
      prop: 'formData',
      event: 'syncData'
    },
    methods: {
      syncData() {
        this.$emit('input', this.value)
      },
    }
}
</script>