v-model 参数的用法

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

vue2 移除 .sync 用法 vue3 参考：https://v3.cn.vuejs.org/guide/migration/v-model.html#v-model-%E5%8F%82%E6%95%B0

列子，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>