vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > useVModel()使用

vue中useVModel()的使用方法(通俗易懂)

作者：努力学前端Hang

useVModel()用来实现父子组件间数据的双向绑定,若不想使用默认回调,也可以自己使用emit实现回调,这篇文章主要给大家介绍了关于vue中useVModel()使用方法的相关资料,需要的朋友可以参考下

1、useVModel()的作用

用于父子组件共享数据，

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

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

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

2、如何使用 

父组件app.vue

<template>
    <div>
        <uniInput v-model:flag="flag" @update:flag="tofather"></uniInput>
    </div>
</template>

<script setup>
import uniInput from './components-input/uni-input.vue'
import {ref} from 'vue'
const flag=ref(true)
const tofather=(data)=>{
    console.log('data',data)
}
</script>

<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

<template>
    <div>
      <h1>{{ flag }}</h1>
      <button @click="changeflag">点击事件</button>
    </div>
</template>

<script setup lang="ts">
import {defineProps,defineEmits} from 'vue'
import {useVModel} from '@vueuse/core'
const emit=defineEmits([])
const props=defineProps({
  flag:{
    type:Boolean,
    default:false
  }
})

const flag=useVModel(props,'flag',emit)

const changeflag=()=>{
  flag.value=!flag.value
}
</script>

<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都是如下使用，不带名称

<uniInput v-model="flag"></uniInput>

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

const props=defineProps({
  modelValue:{
    type:Boolean,
    default:false
  }
})

 同理使用useVModel（）如下

const flag=useVModel(props,'modelValue',emit)

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

<uniInput v-model="flag" @update:model-value="tofather"></uniInput>

总结

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

附：useVModel中的坑

在做商城项目的checkBox的时候，按照自己的思路使用useVModel出现问题，返回值一直为true，代码如下

//我的代码
const checked = useVModel(props, "modelValue", emit);
    const changeChecked = () => {
      checked.value = !checked.value;
     //因为传过来的modelValue为true，这里我认为是可以取反赋值的
    //然而log输出的一直为false
      console.log(checked);    
      emit("change", checked.value);
    };  

//文档代码  
const checked = useVModel(props, 'modelValue', emit)
    const changeChecked = () => {
      const newVal = !checked.value
      checked.value = newVal
      emit('change', newVal)
    }

我当时还不理解，为什么要定义一个中间变量newVal，我觉得我的操作和文档的是一样的，因为我理解赋值之后 newVal  === checked.value，所以我回传了修改之后的checked.value，发现是不生效的。

我将其修改为 !checked.value，生效

//修改后生效代码
const checked = useVModel(props, "modelValue", emit);
    const changeChecked = () => {
      checked.value = !checked.value;
      emit("change", !checked.value);
    };

查阅文档得知，并log打印得知，useVModel返回的是计算属性，而不是ref，并不能直接修改check.value的值

一开始传checked.value一直为true的原因就是不可直接修改值

其实一想也对：直接修改就等于是改了props的值，这在Vue中是不允许的，需要emit通知父组件改值

文档的意思是

 const checked = useVModel(props, 'modelValue', emit)
    const changeChecked = () => {
      const newVal = !checked.value
      // 通知父组件，所以是可以直接修改值的
      checked.value = newVal
      // 让组件支持change事件
      emit('change', newVal)
    }

为什么不直接change事件即可？

做到另一个类似的功能的时候，终于大致有了些模糊的理解：

      // 单纯通知父组件，本组件的值在函数结束前并不会立即变化
      checked.value = newVal
      // 让组件支持change事件，这是为了让父组件能拿到子组件的值，还可以拿到自己的值作为参数传递
      emit('change', newVal)

到此这篇关于vue中useVModel()的使用方法的文章就介绍到这了,更多相关useVModel()使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

阅读全文