vue 中的 v-model詳解
v-model 是 vue 的主要特性，雙向綁定是響應(yīng)式變量的核心。v-model 的簡單原理就是數(shù)據(jù)監(jiān)聽加UI通知，如何在我們自己的組件中實現(xiàn) v-model 呢？數(shù)據(jù)變更監(jiān)聽加父組件事件通知，如下，來自官網(wǎng)的一個例子
<script setup>
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
</script>
<template>
<input
:value="props.modelValue"
@input="emit('update:modelValue', $event.target.value)"
/>
</template>綁定props.modelValue
父組件使用 v-model 時會自動將父組件 v-model 對應(yīng)的變量轉(zhuǎn)換為子組件的一個屬性（props） modelValue，子組件可以通過 Props 進(jìn)行讀取
數(shù)據(jù)變更時進(jìn)行通知
通過 update:modelValue 通知父組件數(shù)據(jù)已經(jīng)更新
父組件中進(jìn)行調(diào)用
<!-- Parent.vue --> <Child :modelValue="foo" @update:modelValue="$event => (foo = $event)" />
Vue3中的簡化寫法
可以看到 v-model 中我們需要定義數(shù)據(jù)監(jiān)聽和變更通知，為什么不能直接在子組件中使用 v-model 呢，這是由于 props 變量是單向的、只讀的，子組件中不能更改。Vue3 提供了一個新的寫法，通過 defineModel 定義 v-model 屬性，如下：
<script setup> const model = defineModel() </script> <template> <input v-model="model" /> </template>
v-model 自定義變量名
默認(rèn) v-model 對應(yīng)變量名為 modelValue，在 vue3 我們也可以指定變量名，這樣父組件可以傳遞多個 v-model 變量，如下：
<script setup>
const title = defineModel('title')
</script>
<template>
<input type="text" v-model="title" />
</template>父組件中調(diào)用時，需要制定變量名
<MyComponent v-model:title="bookTitle" />
總結(jié)
v-model 核心就是監(jiān)聽和通知，本文使用了官網(wǎng)的例子進(jìn)行了簡單的介紹，更多高級用法可以到官網(wǎng)進(jìn)行學(xué)習(xí)。
到此這篇關(guān)于vue 中的 v-model的文章就介紹到這了,更多相關(guān)vue 中的 v-model內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家介紹了vue?項目優(yōu)雅的對url參數(shù)加密詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
關(guān)于electron-vue打包后運(yùn)行白屏的解決方案
這篇文章主要介紹了關(guān)于electron-vue打包后運(yùn)行白屏的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了Vue.js刷新當(dāng)前頁面的常見方法,文中通過代碼示例講解的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-12-12
Vue3?+?Element?Plus?實現(xiàn)可搜索、可折疊、可拖拽的部門樹組件功能
本文給大家介紹Vue3?+?Element?Plus?實現(xiàn)可搜索、可折疊、可拖拽的部門樹組件,本文結(jié)合實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2025-08-08
vue-cli 2.*中導(dǎo)入公共less文件的方法步驟
這篇文章主要介紹了vue-cli 2.*中導(dǎo)入公共less文件的方法步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
這篇文章主要介紹了vue-cli3中如何打包成zip壓縮文件，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
最近項目需要將原vue項目結(jié)合ts的使用進(jìn)行改造，本文從安裝到vue組件編寫進(jìn)行了說明，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
這篇文章主要給大家介紹了關(guān)于Element-UI中el-table如何合并相同單元格的相關(guān)資料,el-table的組件的可以合并單元格,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-08-08
在Vue開發(fā)中,父組件和子組件之間的數(shù)據(jù)傳遞是一項常見的任務(wù),本文將介紹如何在Vue中實現(xiàn)父組件控制子組件的值,以便靈活地管理和更新子組件的數(shù)據(jù),文中有詳細(xì)的代碼講解,需要的朋友可以參考下2023-11-11
屏幕錄制和直播推流是現(xiàn)代Web應(yīng)用中常用的功能,Vue作為一種流行的JavaScript框架,提供了一些工具和庫,可以方便地實現(xiàn)屏幕錄制和直播推流功能,本文將介紹如何在Vue中進(jìn)行屏幕錄制和直播推流,需要的朋友可以參考下2024-01-01