# 1.v-model 使用 methods 双向绑定
# App
vue | // App.vue |
| <template> |
| <div> |
| |
| |
| <input :value="message" @input="message = $event.target.value" /> --> |
| |
| <neko-input v-model="message"></neko-input> |
| |
| <hy-input |
| :modelValue="message" // 绑定数据属性 |
| @update:model-value="message = $event"> // 绑定事件 $event 就是值 |
| </hy-input> --> |
| |
| |
| |
| |
| <h2>{{ message }}</h2> |
| </div> |
| </template> |
| |
| <script> |
| import NekoInput from "./NekoInput.vue"; |
| |
| export default { |
| components: { |
| NekoInput, |
| }, |
| data() { |
| return { |
| message: "Hello World", |
| }; |
| }, |
| }; |
| </script> |
| |
| <style scoped></style> |
vue | // NekoInput.vue |
| <template> |
| <div> |
| <input type="text" :value="modelValue" @input="listeningIpt($event)" /> |
| </div> |
| </template> |
| |
| <script> |
| export default { |
| |
| props: { |
| modelValue: String, |
| }, |
| emits: ["update:modelValue"], |
| methods: { |
| listeningIpt(e) { |
| |
| this.$emit("update:modelValue", e.target.value); |
| }, |
| }, |
| }; |
| </script> |
| |
| <style scoped></style> |
参考结果:
# 2.v-model 使用 computed 双向绑定
# App
vue | // App.vue |
| <template> |
| <div> |
| |
| |
| <input :value="message" @input="message = $event.target.value" /> --> |
| |
| <neko-input v-model="message"></neko-input> |
| |
| <hy-input |
| :modelValue="message" // 绑定数据属性 |
| @update:model-value="message = $event"> // 绑定事件 $event 就是值 |
| </hy-input> --> |
| |
| |
| |
| |
| <h2>{{ message }}</h2> |
| </div> |
| </template> |
| |
| <script> |
| import NekoInput from "./NekoInput.vue"; |
| |
| export default { |
| components: { |
| NekoInput, |
| }, |
| data() { |
| return { |
| message: "Hello World", |
| }; |
| }, |
| }; |
| </script> |
| |
| <style scoped></style> |
vue | // NekoInput.vue |
| <template> |
| <div> |
| |
| |
| <input v-model="iptValue" /> |
| </div> |
| </template> |
| |
| <script> |
| export default { |
| |
| props: { |
| modelValue: String, |
| }, |
| emits: ["update:modelValue"], |
| computed: { |
| iptValue: { |
| set(value) { |
| |
| this.$emit("update:modelValue", value); |
| }, |
| get() { |
| return this.modelValue; |
| }, |
| }, |
| }, |
| }; |
| </script> |
| |
| <style scoped></style> |
参考结果:
# 3. 绑定两个 v-model
# App
vue | // App.vue |
| <template> |
| <div> |
| |
| |
| <input :value="message" @input="message = $event.target.value" /> --> |
| |
| <neko-input v-model="message" v-model:info="info"></neko-input> |
| |
| <hy-input |
| :modelValue="message" // 绑定数据属性 |
| @update:model-value="message = $event"> // 绑定事件 $event 就是值 |
| </hy-input> --> |
| |
| |
| |
| |
| <h2>{{ message }}</h2> |
| <h2>{{ info }}</h2> |
| </div> |
| </template> |
| |
| <script> |
| import NekoInput from "./NekoInput.vue"; |
| |
| export default { |
| components: { |
| NekoInput, |
| }, |
| data() { |
| return { |
| message: "Hello World", |
| info: "Nico Niconi", |
| }; |
| }, |
| }; |
| </script> |
| |
| <style scoped></style> |
vue | // NekoInput.vue |
| <template> |
| <div> |
| |
| |
| <input v-model="iptValue" /> |
| <input v-model="info" /> |
| </div> |
| </template> |
| |
| <script> |
| export default { |
| |
| props: { |
| modelValue: String, |
| info: Object, |
| }, |
| emits: ["update:modelValue", "update:info"], |
| computed: { |
| iptValue: { |
| set(value) { |
| |
| this.$emit("update:modelValue", value); |
| }, |
| get() { |
| return this.modelValue; |
| }, |
| }, |
| info: { |
| set(value) { |
| this.$emit("update:info", value); |
| }, |
| get() { |
| return this.info; |
| }, |
| }, |
| }, |
| }; |
| </script> |
| |
| <style scoped></style> |
参考结果: