The child component passes the value to the parent component in the computed

Posted Jun 16, 20201 min read

Usually the child component passes the value to the parent component through methods, and then the parent component takes it.
Then it was recently discovered that the value of the parent component can be updated through computed.
Without further ado, go to the picture first.
image.png

computed:{
    syncValue:{
      set(v) {//Monitor the change of the current attribute value, execute when the attribute value changes, update the related attribute data
        this.$emit("update:value", v);
      },
      get() {//callback function is executed when you need to read the current attribute value, calculate and return the current attribute value according to the relevant data
        return this.value;
      }
    }
  },

image.png

The parent component gets the value of the child component by :value.sync = "value"
At this time the Vue.sync modifier can not be less! !