一文帶你深入了解V-model實現(xiàn)數(shù)據(jù)雙向綁定
父組件實現(xiàn)雙向綁定
在父組件中使用 v-model：
<ChildComponent v-model="message" />
等價于：
<ChildComponent :modelValue="message" @update:modelValue="val => message = val" />
:modelValue：通過 props 將 message 的值傳遞給子組件。
@update:modelValue：通過 emit 向父組件發(fā)送更新值。
子組件實現(xiàn)雙向綁定
為了支持父組件的 v-model，子組件需要：
1.定義 props，接收父組件傳遞的數(shù)據(jù)。
2.使用 emit 發(fā)送更新事件。
<script setup>
import { defineProps, defineEmits } from 'vue';
// 接收父組件傳遞的 modelValue
defineProps({
modelValue: String, // 父組件傳遞的值
});
// 定義更新事件
defineEmits(['update:modelValue']);
const updateValue = (newValue) => {
// 觸發(fā)事件，通知父組件更新數(shù)據(jù)
emit('update:modelValue', newValue);
};
</script>
<template>
<input :value="modelValue" @input="updateValue($event.target.value)" />
</template>
defineModel()
從 Vue 3.4 開始，推薦的實現(xiàn)方式是使用 defineModel()宏
<!-- Child.vue -->
<script setup>
const model = defineModel()
function update() {
model.value++
}
</script>
<template>
<div>Parent bound v-model is: {{ model }}</div>
<button @click="update">Increment</button>
</template>
父組件可以用 v-model 綁定一個值：
template
<!-- Parent.vue --> <Child v-model="countModel" />
defineModel() 返回的值是一個 ref。它可以像其他 ref 一樣被訪問以及修改，不過它能起到在父組件和當前變量之間的雙向綁定的作用：
- 它的 .value 和父組件的 v-model 的值同步；
- 當它被子組件變更了，會觸發(fā)父組件綁定的值一起更新。
這意味著你也可以用 v-model 把這個 ref 綁定到一個原生 input 元素上，在提供相同的 v-model 用法的同時輕松包裝原生 input 元素：
<script setup> const model = defineModel() </script> <template> <input v-model="model" /> </template>
底層機制
defineModel 是一個便利宏。編譯器將其展開為以下內容：
一個名為 modelValue 的 prop，本地 ref 的值與其同步；
一個名為 update:modelValue 的事件，當本地 ref 的值發(fā)生變更時觸發(fā)。
到此這篇關于一文帶你深入了解V-model實現(xiàn)數(shù)據(jù)雙向綁定的文章就介紹到這了,更多相關V-model數(shù)據(jù)雙向綁定內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
vue 動態(tài)給每個頁面添加title、關鍵詞和描述的方法
這篇文章主要介紹了vue 動態(tài)給每個頁面添加title、關鍵詞和描述的方法，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-08-08
vue2.5.2使用http請求獲取靜態(tài)json數(shù)據(jù)的實例代碼
這篇文章主要介紹了vue2.5.2使用http請求獲取靜態(tài)json數(shù)據(jù)的實例代碼,需要的朋友可以參考下2018-02-02
這篇文章主要為大家詳細介紹了Vue動態(tài)生成表格的行和列，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07
在最近新起的項目中,用到了較新的技術棧vue3.2+vite+ts,跟著網上的寫法漸漸上手了,下面這篇文章主要給大家介紹了關于vue3如何加載本地圖片等靜態(tài)資源的相關資料,需要的朋友可以參考下2023-04-04
這篇文章主要介紹了vue中注冊自定義的全局js方法,文中給大家補充介紹了vue自定義函數(shù)掛到全局的方法，需要的朋友可以參考下2019-11-11
這篇文章主要介紹了Vue判斷數(shù)組內是否存在某一項,今天給大家分享兩種方法，分別是findIndex()和 indexOf()方法，本文結合實例代碼給大家介紹的非常詳細，需要的朋友可以參考下2023-07-07
VUE安裝依賴時報錯:npm ERR! code ERESOLVE的解決
在使用npm安裝項目依賴時,有時會遇到錯誤信息 “npm ERR! code ERESOLVE”,本文就來介紹一下VUE安裝依賴時報錯的解決,具有一定的參考價值,感興趣的可以了解一下2023-10-10
基于Electron24+Vite4+Vue3搭建桌面端應用實戰(zhàn)教程
這篇文章主要介紹了基于Electron24+Vite4+Vue3搭建桌面端應用,這次給大家主要分享的是基于electron最新版本整合vite4.x構建vue3桌面端應用程序，需要的朋友可以參考下2023-05-05
這篇文章主要介紹了vue代理模式解決跨域詳解的相關資料,需要的朋友可以參考下2022-09-09
Vue官網教程上關于v-model的講解不是十分的詳細,寫這篇文章的目的就是詳細的剖析一下,下面這篇文章主要給大家介紹了關于vue?v-model最詳細講解的相關資料,需要的朋友可以參考下2022-11-11