子组件修改父组件数据的语法糖

父组件给子组件传值通过props，子组件改变父组件的数据通过事件this.$emit('事件名','值')

父组件

<template>
  <div>
    <child :data="data" :click="handleClick" />
  </div>
</template>

<script>
import child from "./child";
export default {
components: {
    child
  },
  data() {
    return {
      data: "修改前"
    };
  },
  methods: {
    handleClick(val) {
      this.data = val
    }
  }
};
</script>

子组件

<template>
  <div>
    {{ data }}
    <el-button @click="handleClick">点击修改</el-button>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: String,
      default: () => ""
    }
  },
  methods: {
    handleClick() {
      this.$emit("click", "修改后");
    }
  }
};
</script>

使用.sync修饰符父组件中

<child :data.sync="data" />

会被扩展为

<child :data="data" @update:data="val => data = val"/>

子组件中

this.$emit("update:data", "修改后")