Vue3.5父传子双向数据绑定

最新版本vue3.5父传子的写法

• father.vue
  

  <template>
  <!-- 使用v-model的方式传值 -->
  <!-- v-model:后面的这个值随便起，引号里面的内容取想要传递的值-->
   <UserName
    v-model:info="info"
    v-model:str='str'
    />  
  </template>
  
  <script setup>
  import { ref } from 'vue'
  import Son from './Son.vue'
  //定义一个对象数据
  const info = ref({
  name:'张三',
  age:18,
  sex:'男'
  })
  //定义一个基本数据类型
  const str = ref('readme!')
  </script>
  <style scoped>
  </style>

• Son.vue
  

  <template>
   <!-- 使用v-model的方式进行绑定 -->
  <input type="text" v-model="info.name"></input>
  <input type="text" v-model="info.age"></input>
  <input type="text" v-model="info.sex"></input>
  <input type="text" v-model="str"></input>
  </template>
  
  <script setup>
  //子组件使用defineModel接收
  const info = defineModel('info')
  const str = defineModel('str')
  </script>
  
  <style scoped>
  </style>

• 这样就实现了父传子的双向数据绑定，如果需要规定属性的约束值，按照下面的方案写
  

  
  <script setup>
  //子组件使用defineModel接收
  const info = defineModel('info',{
    type: Object,
    required: true,
    default: () => ({ name: '张三', age: 18, sex: '男' })
  })
  const str = defineModel('str'，{
  type: String,
  required: false,
  default: 'readme!'                      
  })
  </script>

• 然后就通过对应的事件来查看绑定的情况即可