Vue's various implementation methods for modifying parent component props through child components

<template>
  <div style="background-color: skyblue;">
    <h3>Modify prop by listening to child component emit events through parent component on</h3>
    <div>parent obj:{{ obj }}</div>
    <div>parent msg:{{ msg }}</div>
    <!-- When the parent component calls the child component, it listens to the emit event triggered by the child component through on to receive the value and update the user-->
    <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: {
    // Listen for events triggered by child components and update obj in data
    updateObj (key, newVal) {
      this.obj[key] = newVal
    },
    // Listen for events triggered by child components and update msg in data
    updateMsg (newVal) {
      this.msg = newVal
    }
  }
}
</script>

<template>
  <div style="background-color: pink;">
    <div>
      <span>Modify name:</span>
      <!-- Here, the binding value is value, because the input is mainly used to display prop data, and the actual modification is not in the subcomponent. The subcomponent is only used as a modification trigger source-->
      <!-- Bind input event as the entry point of the trigger source -->
      <input type="text" :value="obj.name" @input="updateObj($event, 'name')">
    </div>
    <div>
      <span>Modify age:</span>
      <input type="text" :value="obj.age" @input="updateObj($event, 'age')">
    </div>
    <div>
      <span>Modify 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: {
    // Notify the parent component to update obj
    updateObj ($event, key) {
      // Receive the input value and the corresponding attribute in obj that needs to be updated, and then pass it back to the parent component // The parent component can know which attribute value in obj the child component needs to update this.$emit('update-obj', key, $event.target.value)
    },
    // Notify the parent component to update msg
    updateMsg (newVal) {
      this.$emit('update-msg', newVal)
    }
  }
}
</script>

<template>
  <div style="background-color: skyblue;">
    <h3>Modify prop through parent component sync modifier + child component emit event</h3>
    <div>parent obj:{{ obj }}</div>
    <div>parent msg:{{ msg }}</div>
    <!-- When the parent component calls the child component to pass props, just add .sync after the prop -->
    <syncChild :obj.sync="obj" :msg.sync="msg" />
    <!--
      sync is actually equivalent to executing @listener triggered event name = "property name in parent data = value passed by emit (ie $event)"
      This piece of code -->
    <!-- The effect is equivalent to the following code, so there is no need to define methods to modify data in the parent component methods-->
    <!--
      <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>Modify name:</span>
      <!-- Here, the binding value is value, because the input is mainly used to display prop data, and the actual modification is not in the subcomponent. The subcomponent is only used as a modification trigger source-->
      <!-- Bind input event as the entry point of the trigger source -->
      <input type="text" :value="childObj.name" @input="updateObj($event, 'name')">
    </div>
    <div>
      <span>Modify age:</span>
      <input type="text" :value="childObj.age" @input="updateObj($event, 'age')">
    </div>
    <div>
      <span>Modify msg:</span>
      <input type="text" :value="msg" @input="updateMsg($event.target.value)">
    </div>
  </div>
</template>

<script>
// Here we introduce the cloneDeep deep copy method of the lodash tool library // Official document address https://www.lodashjs.com/
import { cloneDeep } from 'lodash'

export default {
  name: 'emitUpdateChild',
  props: {
    obj: {
      type: Object,
      default: () => {}
    },
    msg: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      // Here, prop's obj is copied through deep copy, mainly for:
      // 1. Distinguish two objects (reference types) using different memory addresses // 2. Keep all values ​​in the object to facilitate child component rendering/modification/returning childObj: cloneDeep(this.obj)
    }
  },
  methods: {
    // Notify the parent component to update obj
    updateObj ($event, key) {
      // Receive the input value and the corresponding attribute in childObj that needs to be updated // Then update childOBj and pass it back to the parent component // The parent component can directly update the obtained childObj to the obj of data this.childObj[key] = $event.target.value
      this.$emit('update:obj', this.childObj)
    },
    // Notify the parent component to update msg
    updateMsg (newVal) {
      this.$emit('update:msg', newVal)
    }
  }
}
</script>

<template>
  <div style="background-color: skyblue;">
    <h3>Modify prop by assigning it to data</h3>
    <div>parent obj:{{ obj }}</div>
    <div>parent 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>Modify name:</span>
      <!-- Here, because we assign prop directly to data, we can directly use v-model two-way binding to modify the data-->
      <input type="text" v-model="dataObj.name">
    </div>
    <div>
      <span>Modify age:</span>
      <input type="text" v-model="dataObj.age">
    </div>
    <div>
      <span>Modify msg:</span>
      <!-- Here is another way to modify basic data types, which can be implemented through watch listeners-->
      <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 {
      // When the reference data type is directly assigned, it is a shallow copy, only the memory address is copied, and modifying one will affect the other dataObj: this.obj,
      // When basic data types are directly assigned, the values ​​are copied, and modifying one will not affect the other dataMsg: this.msg
    }
  },
  watch:
    // Here we listen to the dataMsg copied from data, and when it is modified, execute emit to notify the parent component to update dataMsg (newVal) {
      this.$emit('update:msg', newVal)
    }
  }
}
</script>

<template>
  <div style="background-color: skyblue;">
    <h3>Modify props through computed property monitoring</h3>
    <div>parent obj:{{ obj }}</div>
    <div>parent 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>Modify name:</span>
      <!-- Here, because we listen to prop directly through the computed property, we can directly use v-model two-way binding to modify the data-->
      <input type="text" v-model="computedObj.name">
    </div>
    <div>
      <span>Modify age:</span>
      <input type="text" v-model="computedObj.age">
    </div>
    <div>
      <span>Modify msg:</span>
      <!-- Here is another way to modify basic data types, which can be achieved through the setter of the computed property-->
      <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() {
      // Here, the reference data type obj is directly returned. At this time, computedObj is equivalent to obj
      // So it is a shallow copy, only the memory address will be copied, and modifying one will affect the other return this.obj
    },
    computedMsg: {
      get () {
        // Every time the prop is updated, the getter method of the calculated property will be triggered to obtain the latest value // When returning the basic data type directly, the value is copied, and modifying one will not affect the other return this.msg
      },
      set (newVal) {
        // Here we use the setter method of the calculated property to trigger the emit when the value is modified to notify the parent component to update the value this.$emit('update:msg', newVal)
      }
    }
  }
}
</script>