vue使用v-model進行跨組件綁定的基本實現方法

大傢好,今天我們來說一下使用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>
  <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實現的原理

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跨組件綁定內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!

推薦閱讀: