Vue 3.3 新特性-defineModel

Vue 3.3 新特性

defineModel使用

定义子组件

• 将原来的defineProps改为defineModel
  • 当子组件变化是，父级组件也会变化，修改对应值

<template>
  <input type="checkbox"  checked=true  v-model="msg" />
</template>
<script setup>
import { ref,defineModel } from 'vue'

const msg=defineModel()
</script>

定义父级组件

• 在父级组件中调用子组件，将第一次的值，传递给子级组件

<template>
  {{msg.msg}}
	<Comp v-model="msg.msg" />
</template>

<script setup>
import { ref,reactive } from 'vue'
import Comp from "./Comp.vue"
  
const msg =reactive({
  msg:true
})
</script>

defineModel作用：当自己组件修改时，可以修改父级组件，省略掉原来的，defineEmit，使代码简化