vue3.0 在单个组件实例上创建多个 v-model 绑定

目录：

Register.vue:

<template>
  <div>
    用户名：<input type="text" :value="username" @input="handleUsername" />
  </div>
  <div>
    密码：<input type="text" :value="password" @input="handlePassword" />
  </div>
</template>

<script>
export default {
  props: {
    username: String,
    password: String,
  },
  setup(props, context) {
    const handleUsername = (e) => {
      context.emit("update:username", e.target.value)
    }

    const handlePassword = (e) => {
      context.emit("update:password", e.target.value)
    }

    return {
      handleUsername,
      handlePassword,
    }
  },
}
</script>

<style></style>

Home.vue:

<template>
  <Register v-model:username="username" v-model:password="password"></Register>
  <button @click="handleRegister">注册</button>
</template>

<script>
import { reactive, toRefs } from "vue"
import Register from "../components/Register"

export default {
  components: {
    Register,
  },
  setup() {
    const state = reactive({
      username: "admin",
      password: "123456",
    })

    const { username, password } = toRefs(state)

    const handleRegister = () => {
      let { username, password } = state
      console.log(username, password)
    }

    return {
      username,
      password,
      handleRegister,
    }
  },
}
</script>

<style></style>