Vue 3.0 v-model用法

父组件

<template>
  <div>
    <hello-world
      v-model:foo="val1"
      v-model:bar="val2"
    />
    {{val1}}-{{val2}}
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import HelloWorld from './components/HelloWorld.vue'

export default defineComponent({
  name: 'App',
  components: {
    HelloWorld,
  },
  setup() {
    const val1 = ref('1')
    const val2 = ref('2')

    return {
      val1,
      val2,
    }
  },
})
</script>

子组件

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

<script>
import { defineComponent, ref } from 'vue'
export default defineComponent({
  name: 'HelloWorld',
  props: {
    foo: {
      type: [String, Number],
    },
    bar: {
      type: [String, Number],
    },
  }
})
</script>

<style scoped>
</style>