vue3 父子组件双向数据

修改父组件传来的值

众所周知，在vue中父组件传来的值是只读不可修改的，但是在vue3中父子组件使用v-model可以修改父组件传来的值。
父组件：

<template>
  <div>
    <h1>我是父组件</h1>
    <hr />
    <children v-model:num="num" />
  </div>
</template>

<script setup>
  import children from './chlidren.vue';
  import { ref } from 'vue';
  const num = ref(1);
</script>

<style></style>

子组件：

<template>
  <div>
    <h1>我是子组件</h1>
    <span>我是父组件传来的值 ====》 {{ num }}</span> <br />
    <button @click="changeNum">修改num</button>
  </div>
</template>

<script setup>
  import { defineProps, ref, defineEmits } from 'vue';
  const props = defineProps({
    num: {
      type: Number,
      default: 20,
    },
  });
  const Emit = defineEmits(['update:num']);
  const changeNum = () => {
    Emit('update:num', 200);
  };
</script>

<style></style>