Vue3.0 creates multiple V-Model bindings on a single component instance

Directory:

Register.vue:

<template>
  <div>User name:<input type="text" :value="username" @input="handleUsername" />
  </div>
  <div>Password:<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>
Copy the code

Home.vue:

<template>
  <Register v-model:username="username" v-model:password="password"></Register>
  <button @click="handleRegister">registered</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>
Copy the code