快捷導航

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

更新時間：2024年03月18日 08:30:48 作者：努力學前端Hang

useVModel()用來實現(xiàn)父子組件間數(shù)據(jù)的雙向綁定,若不想使用默認回調(diào),也可以自己使用emit實現(xiàn)回調(diào),這篇文章主要給大家介紹了關(guān)于vue中useVModel()使用方法的相關(guān)資料,需要的朋友可以參考下

1、useVModel()的作用

用于父子組件共享數(shù)據(jù)，

1、父組件有個flag（Boolean）屬性

2、將flag屬性傳遞給子組件，要實現(xiàn)雙向數(shù)據(jù)綁定

3、flag屬性在子組件發(fā)生變化，父組件的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發(fā)生改變，執(zhí)行的回調(diào)函數(shù)

4、tofather函數(shù)的參數(shù) data 是flag改變時，回調(diào)函數(shù)傳遞的參數(shù)

子組件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（）函數(shù)，傳參props,雙向綁定的flag，emit

4、當執(zhí)行changeflag函數(shù)時，檢測到flag被修改，會默認執(zhí)行回調(diào)函數(shù)update:flag,不會在代碼中體現(xiàn)

5、默認執(zhí)行emit('update:flag',flag)，參數(shù)是當前雙向綁定的值

3、一般情況

多數(shù)情況下，使用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改變時，默認調(diào)用update:modelValue的emit，所以接收回調(diào)如下

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

總結(jié)

useVModel（）用來實現(xiàn)父子組件間數(shù)據(jù)的雙向綁定，若不想使用默認回調(diào)，也可以自己使用emit實現(xiàn)回調(diào)

附：useVModel中的坑

在做商城項目的checkBox的時候，按照自己的思路使用useVModel出現(xiàn)問題，返回值一直為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，發(fā)現(xiàn)是不生效的。

我將其修改為 !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事件即可？

做到另一個類似的功能的時候，終于大致有了些模糊的理解：

      // 單純通知父組件，本組件的值在函數(shù)結(jié)束前并不會立即變化
      checked.value = newVal
      // 讓組件支持change事件，這是為了讓父組件能拿到子組件的值，還可以拿到自己的值作為參數(shù)傳遞
      emit('change', newVal)

到此這篇關(guān)于vue中useVModel()的使用方法的文章就介紹到這了,更多相關(guān)useVModel()使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！