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>