v-model 参数的用法

作用：实现传递数据到子组件，修改子组件数据同步到父组件

vue2 移除 .sync 用法 vue3 参考：https://v3.cn.vuejs.org/guide/migration/v-model.html#v-model-参数

列子，Child.vue

<template>
  <input :value="name" @input="$emit('update:name',$event.target.value)" />
  <input :value="age" @input="$emit('update:age',$event.target.value)" />
</template>

<script>
  export default {
    name: 'Child',
    props: {
      name: String,
      age: String,
    },
  };
</script>

父组件中使用

<template>
  <p>{{ name }}{{ age }}</p>
  <child
      v-model:name="name"
      v-model:age="age"
  ></child>
</template>

<script>
import Child from "@/components/Child";
import {reactive, toRefs} from "vue";

export default {
  name: 'App',
  components: {
    Child
  },
  setup() {
    const state = reactive({
      name: 'lzw.',
      age: '20'
    })

    return toRefs(state)
  }
}
</script>