vue使用v-model進(jìn)行跨組件綁定的基本實現(xiàn)方法
大家好，今天我們來說一下使用v-model實現(xiàn)父子組件的綁定效果
1：簡單版代碼如下：
父組件：
<template>
<div>
// 3：使用子組件，并使用v-model綁定
<About v-model="father"/>
</div>
</template>
<script>
// 1：引入子組件
import About from "./About";
export default {
// 2：注冊子組件
components: {
About,
},
data() {
return {
// 值給空
father:''
}
},
// 監(jiān)聽組件數(shù)據(jù)的變化
watch:{
father(val){
console.log(val);
}
}
};
</script>
子組件：
<template>
<div>
// 2：使用v-model綁定
<input type="text" v-model="son">
</div>
</template>
<script>
export default {
// 1：接收父組件的信息
props: {
value:{
type:String,
default:''
}
},
data() {
return {
// 3：賦空值
son:''
}
},
// 4：監(jiān)聽 如果改變
watch:{
// 把value賦值給son
value(){
// 這里的this.value是props里的value
this.son = this.value
},
// 把son傳遞給父組件
son(){
this.$emit('input',this.son)
}
}
}
</script>
至于為什么子組件向父組件傳遞時，$emit的第一個參數(shù)為'input'，有興趣的同行可以去了解一下v-model實現(xiàn)的原理
2：下面進(jìn)入項目中的使用（獲取子組件的圖片地址，傳給父組件，同步更新圖片信息）
基本上差不多
Ⅰ：在父組件內(nèi)引入子組件，并在子組件標(biāo)簽內(nèi)使用v-model，賦值為空
(UploadImg標(biāo)簽 是引入的 子組件)
Ⅱ：接著在子組件內(nèi)使用 props接收：
Ⅲ：在子組件 頁面 內(nèi)同樣使用v-model，并在data內(nèi)賦值為空 圖片：
Ⅳ：在子組件內(nèi)使用watch用來監(jiān)聽其變化
分解圖上代碼：
value函數(shù)把傳來的父組件賦值給子組件，this.value也就是props里的value
value() {
this.SonStaffPhoto = this.value
console.log(this.SonStaffPhoto)
}
這里是v-model綁定的子組件函數(shù)，用來把自己傳遞給父組件
SonStaffPhoto() {
this.$emit('input', this.SonStaffPhoto)
},
到這里你就可以把想傳遞給父組件的內(nèi)容賦值給 this.SonStaffPhoto了（我賦值給了用來保存圖片地址的變量）
Ⅴ：也可以在父組件里監(jiān)聽其變化：
父組件里的this.staffPhoto，同樣可以把想綁定的內(nèi)容賦值給它（我賦值給了最新的圖片變量，這樣就過實現(xiàn)了子組件圖片更新，父組件也同步更新的效果）
總結(jié)
到此這篇關(guān)于vue使用v-model進(jìn)行跨組件綁定的基本實現(xiàn)方法的文章就介紹到這了,更多相關(guān)vue用v-model跨組件綁定內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了解決Vue大括號字符換行踩的坑，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了vue計算屬性computed的使用方法,結(jié)合實例形式分析了vue計算屬性computed的基本用法及相關(guān)操作注意事項,需要的朋友可以參考下2019-03-03
Vue服務(wù)端渲染和Vue瀏覽器端渲染的性能對比(實例PK )
這篇文章主要介紹了Vue服務(wù)端渲染和Vue瀏覽器端渲染的性能對比(實例PK ),非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-03-03
這篇文章主要為大家詳細(xì)介紹了vue3.0實現(xiàn)移動端電子簽名組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
這篇文章主要為大家詳細(xì)介紹了vuex實現(xiàn)一個簡易計數(shù)器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
vue2 elementui if導(dǎo)致的rules判斷失效的解決方法
文章討論了在使用Vue2和ElementUI時,將if語句放在el-form-item內(nèi)導(dǎo)致rules判斷失效的問題,并提出了將判斷邏輯移到外部的解決方案,感興趣的朋友一起看看吧2024-12-12
Vuex 是一個專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式,下面這篇文章主要給大家介紹了關(guān)于vuex新手進(jìn)階篇之取值的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10
Mock.js?是一個用于生成隨機(jī)數(shù)據(jù)和攔截?Ajax?請求的?JavaScript?庫,它非常適合在前端開發(fā)中模擬后端?API,尤其是在前后端分離的開發(fā)模式下,本文給大家介紹了如何在Vue2項目中使用Mock.js,需要的朋友可以參考下2024-10-10
Vue2 Element Schema Form 配置式生成表單的實現(xiàn)
本文主要介紹了Vue2 Element Schema Form 配置式生成表單的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05
vue/cli?配置動態(tài)代理無需重啟服務(wù)的操作方法
vue-cli是vue.js的腳手架，用于自動生成vue.js+webpack的項目模板，分為vue?init?webpack-simple?項目名和vue?init?webpack?項目名兩種，這篇文章主要介紹了vue/cli?配置動態(tài)代理，無需重啟服務(wù),需要的朋友可以參考下2022-05-05