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

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:''
      }
  },// 監聽元件資料的變化
  watch:{
      father(val){
          console.log(val);
      }
  }
};
</script>

子元件：

<template>
  &l程式設計客棧t;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:''
        }
    http://www.cppcns.com
 
},// 4：監聽 如果改變
www.cppcns.com    watch:{
        // 把value賦值給son   
        value(){
        // 這裡的this.value是props裡的value
            this.son = this.value
        },// 把son傳遞給父元件
        son(){
            this.$emit('input',this.son)
        }
    }
}
</script>

至於為什麼子元件向父元件傳遞時，$emit的第一個引數為'input'，有興趣的同行可以去了解一下v-model實現的原理

2：下面進入專案中的使用（獲取子元件的圖片地址，傳給父元件，同步更新圖片資訊）

基本上差不多

Ⅰ：在父元件內引入子元件，並程式設計客棧在子元件標籤內使用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跨元件繫結內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！