大家好，今天我們來說一下使用v-model實現父子組件的綁定效果

父組件：

<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:’’ } }, // 監聽組件數據的變化 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：監聽 如果改變 watch:{// 把value賦值給son value(){// 這里的this.value是props里的value this.son = this.value},// 把son傳遞給父組件son(){ this.$emit(’input’,this.son)} }}</script>

至于為什么子組件向父組件傳遞時，$emit的第一個參數為’input’，有興趣的同行可以去了解一下v-model實現的原理

基本上差不多

Ⅰ：在父組件內引入子組件，并在子組件標簽內使用v-model，賦值為空(UploadImg標簽 是引入的 子組件)

Ⅱ：接著在子組件內使用 props接收：

Ⅲ：在子組件 頁面 內同樣使用v-model，并在data內賦值為空 圖片：

Ⅳ：在子組件內使用watch用來監聽其變化

分解圖上代碼：

value函數把傳來的父組件賦值給子組件，this.value也就是props里的value

value() { this.SonStaffPhoto = this.value console.log(this.SonStaffPhoto) }

這里是v-model綁定的子組件函數，用來把自己傳遞給父組件

SonStaffPhoto() { this.$emit(’input’, this.SonStaffPhoto) },

到這里你就可以把想傳遞給父組件的內容賦值給 this.SonStaffPhoto了（我賦值給了用來保存圖片地址的變量）

Ⅴ：也可以在父組件里監聽其變化：

父組件里的this.staffPhoto，同樣可以把想綁定的內容賦值給它（我賦值給了最新的圖片變量，這樣就過實現了子組件圖片更新，父組件也同步更新的效果）

到此這篇關于vue使用v-model進行跨組件綁定的基本實現方法的文章就介紹到這了,更多相關vue用v-model跨組件綁定內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！