Vue3中父子组件实现数据双向绑定效果

父组件：

<template>
  <div class="user">
    <hy-form v-model="formData" />
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import HyForm from '@/base-ui/form'

export default defineComponent({
  components: { HyForm },
  name: 'sysUser',
  setup() {
    const formData = ref({
      id: '',
      password: '',
    })
    return {
      formData,
    }
  }
})
</script>

<style scoped></style>

将formData数据使用v-model传递给子组件

子组件：

<template>
  <div class="hy-form">
  <el-input
    placeholder="请输入用户"
    v-model="formData.id"
  />
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, watch } from 'vue'

export default defineComponent({
  props: {
 	 // modelValue为约定俗成字段，就是父组件传来的v-model绑定的值
    modelValue: {
      type: Object,
      required: true
    },
  },
  emits: ['update:modelValue'],
  setup(props, { emit }) {
  	// 这里父子是因为不直接修改modelValue中的数据，保持单一数据流
    const formData = ref({ ...props.modelValue })
    // 监听formData中数据的改变
    watch(
      formData,
      (newValue) => {
      	// 数据双向绑定给modelValue
        emit('update:modelValue', newValue)
      },
      {
        deep: true
      }
    )

    return {
      formData
    }
  }
})
</script>

<style scoped lang="less">
.hy-form {
  padding-top: 22px;
}
</style>

使用modelValue进行接收，将接收的modelValue拷贝给formData，并监听formData的数据是否改变，改变了就将新数据emit(‘update:modelValue’, 新数据)更新数据

• 关于vue3.x中的emits的用法
• Vue3.0新特性----emits选项