useVModel()的使用------通俗易懂

1、useVModel()的作用

用于父子组件共享数据，

1、父组件有个flag（Boolean）属性

2、将flag属性传递给子组件，要实现双向数据绑定

3、flag属性在子组件发生变化，父组件的flag属性一起改变

2、如何使用 

父组件app.vue

3. <script setup>
4. import uniInput from './components-input/uni-input.vue'
5. import {ref} from 'vue'
6. const flag=ref(true)
7. const tofather=(data)=>{
8. console.log('data',data)
9. }
10. script>
12. <style scoped lang="less">style>

1、父组件有flag属性，使得flag和子组件uniInput双向绑定

2、使用v-model:flag进行双向绑定，v-model的默认写法是（v-model:modelValue），其中modelValue是传递到子组件的props值

3、@update：flag是子组件中的flag发生改变，执行的回调函数

4、tofather函数的参数 data 是flag改变时，回调函数传递的参数 

子组件uniInput.vue

3. <script setup lang="ts">
4. import {defineProps,defineEmits} from 'vue'
5. import {useVModel} from '@vueuse/core'
6. const emit=defineEmits([])
7. const props=defineProps({
8. flag:{
9. type:Boolean,
10. default:false
11. }
12. })
14. const flag=useVModel(props,'flag',emit)
16. const changeflag=()=>{
17. flag.value=!flag.value
18. }
19. script>
21. <style scoped lang="less">style>

 1、引入useVModel

 2、使用props接收父组件传递的值（接收flag）

 3、用useVModel（）函数，传参props,双向绑定的flag，emit

 4、当执行changeflag函数时，检测到flag被修改，会默认执行回调函数update:flag,不会在代码中体现

 5、默认执行emit('update:flag',flag)，参数是当前双向绑定的值

3、一般情况 

 多数情况下，使用v-model都是如下使用，不带名称

所以在子组件使用如下方式接收，因为v-model默认名称是modelValue

1. const props=defineProps({
2. modelValue:{
3. type:Boolean,
4. default:false
5. }
6. })

 同理使用useVModel（）如下

 当flag改变时，默认调用update:modelValue的emit，所以接收回调如下

总结

useVModel（）用来实现父子组件间数据的双向绑定，若不想使用默认回调，也可以自己使用emit实现回调