// 父組件中，通過.sync修改符綁定屬性
<my-children :val.sync='val'></my-children>
// 子組件中，修改屬性
<script>
export default {
  props: ['val'],
  methods: {
    myClick() {
      this.$emit('update:val', this.val + 1)
    }
  }
}
</script>

<template>
? <div style="background-color: skyblue;">
? ? <h3>通過父組件on監(jiān)聽子組件emit事件實現(xiàn)修改prop</h3>
? ? <div>父obj:{{ obj }}</div>
? ? <div>父msg:{{ msg }}</div>
? ? <!-- 父組件調(diào)用子組件時通過on監(jiān)聽子組件觸發(fā)的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: {
? ? // 監(jiān)聽子組件觸發(fā)的事件并更新data中的obj
? ? updateObj (key, newVal) {
? ? ? this.obj[key] = newVal
? ? },
? ? // 監(jiān)聽子組件觸發(fā)的事件并更新data中的msg
? ? updateMsg (newVal) {
? ? ? this.msg = newVal
? ? }
? }
}
</script>

<template>
? <div style="background-color: pink;">
? ? <div>
? ? ? <span>修改name:</span>
? ? ? <!-- 這里綁定值用value，因為input在這主要用作展示prop數(shù)據(jù)，實際修改不在子組件，子組件只是作為修改觸發(fā)源 -->
? ? ? <!-- 綁定input事件，作為觸發(fā)源的入口 -->
? ? ? <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中對應(yīng)需要更新值的屬性，然后回傳給父組件
? ? ? // 父組件就可以知道子組件需要更新obj中哪個屬性的值
? ? ? this.$emit('update-obj', key, $event.target.value)
? ? },
? ? // 通知父組件更新msg
? ? updateMsg (newVal) {
? ? ? this.$emit('update-msg', newVal)
? ? }
? }
}
</script>

<template>
? <div style="background-color: skyblue;">
? ? <h3>通過父組件sync修飾符 + 子組件emit事件實現(xiàn)修改prop</h3>
? ? <div>父obj:{{ obj }}</div>
? ? <div>父msg:{{ msg }}</div>
? ? <!-- 父組件調(diào)用子組件傳遞prop時，在prop后加上.sync即可 -->
? ? <syncChild :obj.sync="obj" :msg.sync="msg" />
? ? <!--
? ? ? sync其實就相當(dāng)于執(zhí)行了
? ? ? ? @監(jiān)聽子觸發(fā)的事件名 = "父data中的屬性名 = emit傳遞的值(即$event)"
? ? ? 這一段代碼
? ? -->
? ? <!-- 效果相當(dāng)于下面的代碼，所以父組件methods中不需要再定義修改data數(shù)據(jù)的方法 -->
? ? <!--
? ? ? <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數(shù)據(jù)，實際修改不在子組件，子組件只是作為修改觸發(fā)源 -->
? ? ? <!-- 綁定input事件，作為觸發(fā)源的入口 -->
? ? ? <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復(fù)制了一份，主要為了：
? ? ? // 1.區(qū)分2個對象（引用類型）用的不是同一個內(nèi)存地址
? ? ? // 2.保留對象中所有的值，方便子組件渲染/修改/回傳用
? ? ? childObj: cloneDeep(this.obj)
? ? }
? },
? methods: {
? ? // 通知父組件更新obj
? ? updateObj ($event, key) {
? ? ? // 接收輸入的值，和childObj中對應(yīng)需要更新值的屬性
? ? ? // 然后更新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>

<template>
? <div style="background-color: skyblue;">
? ? <h3>通過賦值到data實現(xiàn)修改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雙向綁定修改數(shù)據(jù) -->
      <input type="text" v-model="dataObj.name">
    </div>
    <div>
      <span>修改age:</span>
      <input type="text" v-model="dataObj.age">
    </div>
    <div>
      <span>修改msg:</span>
      <!-- 這里提供另一種修改基本數(shù)據(jù)類型的思路，可以通過watch偵聽器實現(xiàn) -->
      <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 {
      // 引用數(shù)據(jù)類型直接賦值時是淺拷貝，只會復(fù)制內(nèi)存地址，修改其中一個會影響另一個
      dataObj: this.obj,
      // 基本數(shù)據(jù)類型直接賦值時是復(fù)制值，修改其中一個不會影響另一個
      dataMsg: this.msg
    }
  },
  watch: {
    // 這里偵聽data中復(fù)制過來的dataMsg，當(dāng)修改時執(zhí)行emit通知父組件進(jìn)行更新
    dataMsg (newVal) {
      this.$emit('update:msg', newVal)
    }
  }
}
</script>

<template>
? <div style="background-color: skyblue;">
? ? <h3>通過計算屬性監(jiān)聽實現(xiàn)修改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監(jiān)聽prop了，所以可以直接用v-model雙向綁定修改數(shù)據(jù) -->
? ? ? <input type="text" v-model="computedObj.name">
? ? </div>
? ? <div>
? ? ? <span>修改age:</span>
? ? ? <input type="text" v-model="computedObj.age">
? ? </div>
? ? <div>
? ? ? <span>修改msg:</span>
? ? ? <!-- 這里提供另一種修改基本數(shù)據(jù)類型的思路，可以通過計算屬性computed的setter實現(xiàn) -->
? ? ? <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引用數(shù)據(jù)類型obj，此時computedObj相當(dāng)于obj
? ? ? // 所以是淺拷貝，只會復(fù)制內(nèi)存地址，修改其中一個會影響另一個
? ? ? return this.obj
? ? },
? ? computedMsg: {
? ? ? get () {
? ? ? ? // 這里prop每次更新時，都會觸發(fā)計算屬性的getter方法獲取最新的值
? ? ? ? // 直接return基本數(shù)據(jù)類型時是復(fù)制值，修改其中一個不會影響另一個
? ? ? ? return this.msg
? ? ? },
? ? ? set (newVal) {
? ? ? ? // 這里利用計算屬性的setter方法，監(jiān)聽到值修改時觸發(fā)emit通知父組件更新值
? ? ? ? this.$emit('update:msg', newVal)
? ? ? }
? ? }
? }
}
</script>