记录一下vue的defineModel

vue的definModel()是vue3.4版本以后新增的v-model简单用法

基本数据双向绑定

//father.vue
<script setup>
const str = ref('测试')
</script>
<template>
<Child v-model="str"/>
</template>

//child.vue
<script setup>
const newStr = definModel()
const delStr = ()=>{
newStr.value = '重新赋值'
}
</script>
<template>
<button @click="dealStr">对数据重新赋值</button>
<input v-model="newStr">
</template>

1. definModel()将父组件的str和子组件的newStr的.value属性双向绑定
2. 基础数据解构会失去双向绑定，复杂数据重新赋值会失去双向绑定

复杂数据双向绑定

//father.vue
<script  setup>
const user = ref({
  name: "张三",
  age: 12,
});
</script>

<template>
  <div>
    <div>父组件user:{{ user }}</div>
    <div></div>
    <child v-model="user"></child>
  </div>
</template>

<style lang="scss" scoped></style>


//child.vue
<script setup>
const newUser = defineModel();
const dealUser = () => {
  newUser.value = {
    name: "王五",
    age: 1,
  };
};
const addAge = () => {
  newUser.value.age += 1;
};
</script>

<template>
  <div>
    <div>子组件</div>
    <button @click="newUser.name = '李四'">将name变为李四</button>
    <button @click="dealUser">对user重新赋值</button>
    <button @click="addAge">年龄+1</button>
  </div>
</template>

<style lang="scss" scoped></style>

1、对newUser进行重新赋值父子组件还是双向绑定的