前言

實際作業專案開發中，很經常會有父組件先傳遞值給子組件，再由子組件渲染展示的場景，下面我總結一下目前作業中遇到和用過的一些方式，也算是給大家一個實作方式和思路參考，如有理解不對or有其他方法歡迎在評論區留言指導～

常用方式

推薦，遵循prop單向傳遞的規則，基本資料型別和參考資料型別均可，

1. 通過父組件on監聽子組件emit事件實作修改prop

原理：

• 給子組件中的input標簽系結value屬性賦值prop中的值，因為是用value而不是v-model，所以修改input值的時候并不會影響到prop，
• 然后給input系結input事件，每次輸入內容都會觸發input事件，在事件里通過this.$emit(‘父要監聽的事件名’, 修改后的值)去將值向上傳遞，
• 父組件中通過on監聽子組件剛剛觸發的emit事件，將事件傳遞過來的值更新到父組件的data中，
• 父組件data中的值更新后，因為有通過prop傳遞給子組件，所以子組件也會同步更新prop值并渲染視圖層，

父組件代碼如下：

<template>
  <div style="background-color: skyblue;">
    <h3>通過父組件on監聽子組件emit事件實作修改prop</h3>
    <div>父obj:{{ obj }}</div>
    <div>父msg:{{ msg }}</div>
    <!-- 父組件呼叫子組件時通過on監聽子組件觸發的emit事件，以接收值并更新用 -->
    <emitChild
      :obj="obj"
      :msg="msg"
      @update-obj="updateObj"
      @update-msg="updateMsg"
    />
  </div>
</template>

<script>
import emitChild from './components/emitChild'

export default {
  name: 'emitUpdate',
  components: {
    emitChild
  },
  data () {
    return {
      obj: {
        name: 'zhangsan',
        age: 18
      },
      msg: 'hello'
    }
  },
  methods: {
    // 監聽子組件觸發的事件并更新data中的obj
    updateObj (key, newVal) {
      this.obj[key] = newVal
    },
    // 監聽子組件觸發的事件并更新data中的msg
    updateMsg (newVal) {
      this.msg = newVal
    }
  }
}
</script>

子組件代碼如下：

<template>
  <div style="background-color: pink;">
    <div>
      <span>修改name:</span>
      <!-- 這里系結值用value，因為input在這主要用作展示prop資料，實際修改不在子組件，子組件只是作為修改觸發源 -->
      <!-- 系結input事件，作為觸發源的入口 -->
      <input type="text" :value="obj.name" @input="updateObj($event, 'name')">
    </div>
    <div>
      <span>修改age:</span>
      <input type="text" :value="obj.age" @input="updateObj($event, 'age')">
    </div>
    <div>
      <span>修改msg:</span>
      <input type="text" :value="msg" @input="updateMsg($event.target.value)">
    </div>
  </div>
</template>

<script>
export default {
  name: 'emitUpdateChild',
  props: {
    obj: {
      type: Object,
      default: () => {}
    },
    msg: {
      type: String,
      default: ''
    }
  },
  methods: {
    // 通知父組件更新obj
    updateObj ($event, key) {
      // 接收輸入的值，和obj中對應需要更新值的屬性，然后回傳給父組件
      // 父組件就可以知道子組件需要更新obj中哪個屬性的值
      this.$emit('update-obj', key, $event.target.value)
    },
    // 通知父組件更新msg
    updateMsg (newVal) {
      this.$emit('update-msg', newVal)
    }
  }
}
</script>

2. 通過父組件sync修飾符 + 子組件emit事件實作修改prop

原理：

• 給子組件中的input標簽系結value屬性賦值prop中的值，因為是用value而不是v-model，所以修改input值的時候并不會影響到prop，
• 然后給input系結input事件，每次輸入內容都會觸發input事件，在事件里通過this.$emit(‘父要監聽的事件名’, 修改后的值)去將值向上傳遞，
• 父組件呼叫子組件傳遞prop時，在prop后加上.sync即可將事件傳遞過來的值更新到父組件的data中，因為sync其實就相當于執行了@監聽子觸發的事件名 = "父data中的屬性名 = emit傳遞的值(即$event)"這一段代碼，
• 父組件data中的值更新后，因為有通過prop傳遞給子組件，所以子組件也會同步更新prop值并渲染視圖層，

父組件代碼如下：

<template>
  <div style="background-color: skyblue;">
    <h3>通過父組件sync修飾符 + 子組件emit事件實作修改prop</h3>
    <div>父obj:{{ obj }}</div>
    <div>父msg:{{ msg }}</div>
    <!-- 父組件呼叫子組件傳遞prop時，在prop后加上.sync即可 -->
    <syncChild :obj.sync="obj" :msg.sync="msg" />
    <!--
      sync其實就相當于執行了
        @監聽子觸發的事件名 = "父data中的屬性名 = emit傳遞的值(即$event)"
      這一段代碼
    -->
    <!-- 效果相當于下面的代碼，所以父組件methods中不需要再定義修改data資料的方法 -->
    <!--
      <syncChild
        :obj="obj"
        :msg="msg"
        @update-obj="obj = $event"
        @update-msg="msg = $event"
      />
    -->
  </div>
</template>

<script>
import syncChild from './components/syncChild'

export default {
  name: 'syncUpdate',
  components: {
    syncChild
  },
  data () {
    return {
      obj: {
        name: 'zhangsan',
        age: 18
      },
      msg: 'hello'
    }
  }
}
</script>

子組件代碼如下：

<template>
  <div style="background-color: pink;">
    <div>
      <span>修改name:</span>
      <!-- 這里系結值用value，因為input在這主要用作展示prop資料，實際修改不在子組件，子組件只是作為修改觸發源 -->
      <!-- 系結input事件，作為觸發源的入口 -->
      <input type="text" :value="childObj.name" @input="updateObj($event, 'name')">
    </div>
    <div>
      <span>修改age:</span>
      <input type="text" :value="childObj.age" @input="updateObj($event, 'age')">
    </div>
    <div>
      <span>修改msg:</span>
      <input type="text" :value="msg" @input="updateMsg($event.target.value)">
    </div>
  </div>
</template>

<script>
// 這里引入lodash工具庫的cloneDeep深拷貝方法
// 官方檔案地址 https://www.lodashjs.com/
import { cloneDeep } from 'lodash'

export default {
  name: 'emitUpdateChild',
  props: {
    obj: {
      type: Object,
      default: () => {}
    },
    msg: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      // 這里通過深拷貝將prop的obj復制了一份，主要為了：
      // 1.區分2個物件（參考型別）用的不是同一個記憶體地址
      // 2.保留物件中所有的值，方便子組件渲染/修改/回傳用
      childObj: cloneDeep(this.obj)
    }
  },
  methods: {
    // 通知父組件更新obj
    updateObj ($event, key) {
      // 接收輸入的值，和childObj中對應需要更新值的屬性
      // 然后更新childOBj后，回傳給父組件
      // 父組件直接把拿到的childObj更新到data的obj即可
      this.childObj[key] = $event.target.value
      this.$emit('update:obj', this.childObj)
    },
    // 通知父組件更新msg
    updateMsg (newVal) {
      this.$emit('update:msg', newVal)
    }
  }
}
</script>

取巧方式

主要針對參考資料型別，繞過了vue對于prop的檢測機制，具體看專案規范是否允許這樣寫，

3.通過data實作修改prop

前提：只有參考資料型別可以實作

原理：

• 將父組件傳入的prop直接賦值給子組件的data，此時prop和data兩邊的變數指向的都是同一個記憶體地址，所以修改data等于修改prop，
• vue2開始不允許直接修改prop，但此時我們表面修改的是data不是prop，因此vue不會拋出錯誤，相當于繞過了vue對于不允許修改prop的檢測機制，

父組件代碼如下：

<template>
  <div style="background-color: skyblue;">
    <h3>通過賦值到data實作修改prop</h3>
    <div>父obj:{{ obj }}</div>
    <div>父msg:{{ msg }}</div>
    <dataChild :obj="obj" :msg.sync="msg" />
  </div>
</template>

<script>
import dataChild from './components/dataChild'

export default {
  name: 'dataUpdate',
  components: {
    dataChild
  },
  data () {
    return {
      obj: {
        name: 'zhangsan',
        age: 18
      },
      msg: 'hello'
    }
  }
}
</script>

子組件代碼如下：

<template>
  <div style="background-color: pink;">
    <div>
      <span>修改name:</span>
      <!-- 這里因為我們直接把prop賦值給data了，所以可以直接用v-model雙向系結修改資料 -->
      <input type="text" v-model="dataObj.name">
    </div>
    <div>
      <span>修改age:</span>
      <input type="text" v-model="dataObj.age">
    </div>
    <div>
      <span>修改msg:</span>
      <!-- 這里提供另一種修改基本資料型別的思路，可以通過watch偵聽器實作 -->
      <input type="text" v-model="dataMsg">
    </div>
  </div>
</template>

<script>
export default {
  name: 'dataChild',
  props: {
    obj: {
      type: Object,
      default: () => {}
    },
    msg: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      // 參考資料型別直接賦值時是淺拷貝，只會復制記憶體地址，修改其中一個會影響另一個
      dataObj: this.obj,
      // 基本資料型別直接賦值時是復制值，修改其中一個不會影響另一個
      dataMsg: this.msg
    }
  },
  watch: {
    // 這里偵聽data中復制過來的dataMsg，當修改時執行emit通知父組件進行更新
    dataMsg (newVal) {
      this.$emit('update:msg', newVal)
    }
  }
}
</script>

4.通過計算屬性computed實作修改prop

前提：只有參考資料型別可以實作

原理：

• 在子組件中直接通過計算屬性computed監聽父組件傳入的prop，此時計算屬性computed和prop兩邊的變數指向的都是同一個記憶體地址，所以修改計算屬性computed等于修改prop，
• vue2開始不允許直接修改prop，但此時我們表面修改的是計算屬性computed不是prop，因此vue不會拋出錯誤，相當于繞過了vue對于不允許修改prop的檢測機制，

父組件代碼如下：

<template>
  <div style="background-color: skyblue;">
    <h3>通過計算屬性監聽實作修改prop</h3>
    <div>父obj:{{ obj }}</div>
    <div>父msg:{{ msg }}</div>
    <computedChild :obj="obj" :msg.sync="msg" />
  </div>
</template>

<script>
import computedChild from './components/computedChild'

export default {
  name: 'computedUpdate',
  components: {
    computedChild
  },
  data () {
    return {
      obj: {
        name: 'zhangsan',
        age: 18
      },
      msg: 'hello'
    }
  }
}
</script>

子組件代碼如下：

<template>
  <div style="background-color: pink;">
    <div>
      <span>修改name:</span>
      <!-- 這里因為我們直接通過計算屬性computed監聽prop了，所以可以直接用v-model雙向系結修改資料 -->
      <input type="text" v-model="computedObj.name">
    </div>
    <div>
      <span>修改age:</span>
      <input type="text" v-model="computedObj.age">
    </div>
    <div>
      <span>修改msg:</span>
      <!-- 這里提供另一種修改基本資料型別的思路，可以通過計算屬性computed的setter實作 -->
      <input type="text" v-model="computedMsg">
    </div>
  </div>
</template>

<script>
export default {
  name: 'computedChild',
  props: {
    obj: {
      type: Object,
      default: () => {}
    },
    msg: {
      type: String,
      default: ''
    }
  },
  computed: {
    computedObj () {
      // 這里直接return參考資料型別obj，此時computedObj相當于obj
      // 所以是淺拷貝，只會復制記憶體地址，修改其中一個會影響另一個
      return this.obj
    },
    computedMsg: {
      get () {
        // 這里prop每次更新時，都會觸發計算屬性的getter方法獲取最新的值
        // 直接return基本資料型別時是復制值，修改其中一個不會影響另一個
        return this.msg
      },
      set (newVal) {
        // 這里利用計算屬性的setter方法，監聽到值修改時觸發emit通知父組件更新值
        this.$emit('update:msg', newVal)
      }
    }
  }
}
</script>