vue子组件如何修改父组件值

子组件直接修改父组件的值的话会提示错误，如下：

 父组件：

<template>
  <div class="home">
    <page1 :msg.sync="msg"></page1>
  </div>
</template>

<script>
import page1 from "@/components/page1.vue";
export default {
  name: "Home",
  components: {
    page1
  },
  data() {
    return {
      msg: 'old'
    };
  },
  methods: {
  
  },
};
</script>
<style lang="scss">
  
</style>

 .sync是一个语法糖

<page1 :msg.sync="msg"></page1>
 <!-- 等同于 -->
<page1 :msg="msg" @update:msg="val => msg = val"></page1>

 子组件：

<template>
  <div class="page1">
    {{msg}}
  </div>
</template>

<script>
export default {
  name: "page1",
  components: {
  },
  props: ['msg'],
  data() {
    return {
    };
  },
  mounted() {
    this.$emit('update:msg', 'new')
  },
  methods: {

  },
};
</script>

 更新方式，这样就不会报错

 this.$emit('update:msg', 'new');