Vue2子组件绑定 v-model,实现父子组件通信方式
目录
- 前言
- 默认用法
- 父组件
- 子组件
- .sync写法
- 父组件
- 子组件
- 绑定单个 v-model
- 父组件
- 子组件
- 总结
前言
v-model 可以在组件上使用以实现双向绑定。
首先让我们回忆一下 v-model 在原生元素上的用法:
<input v-model="firstName" />
在代码背后,模板编译器会对 v-model 进行更冗长的等价展开。因此上面的代码其实等价于下面这段:
<input :value="firstName" @input="firstName = $event.target.value" />
默认用法
父组件
<template> <div> <h1>{{ first }}-{{ last }}</h1> <UserName :firstName="first" :lastName="last" @update:firstName="func1" @update:lastName="func2" /> </div> </template> <script> import UserName from "./UserName.vue"; export default { name: "V-Model", components: { UserName, }, data() { return { first: "000", last: "123", }; }, methods: { // 默认用法 func1(val) { this.first = val; }, func2(val) { this.last = val; }, }, }; </script>
子组件
<template> <div> <input v-model="first" type="text" @input="input1" /> <input v-model="last" type="text" @input="input2" /> </div> </template> <script> export default { name: "UserName", props: ["firstName", "lastName"], data() { return { first: this.firstName, last: this.lastName, }; }, methods: { input1() { this.$emit("update:firstName", this.first); }, input2() { this.$emit("update:lastName", this.last); }, }, }; </script>
以上就可以实现 父子组件的双向绑定
.sync写法
传参的时候加上 .sync 会简化上面的写法,父组件不需要定义更新触发函数(update)
<UserName :firstName.sync="first" />
会被扩展为:
<UserName :firstName="first" @update:firstName="val => first = val"></UserName>
当子组件需要更新 firstName 的值时,它需要显式地触发一个更新事件:
this.$emit('update:firstName', newValue)
父组件
<template> <div> <h1>{{ first }}-{{ last }}</h1> <UserName :firstName.sync="first" :lastName.sync="last" /> </div> </template> <script> import UserName from "./UserName.vue"; export default { name: "V-Model", components: { UserName, }, data() { return { first: "000", last: "123", }; }, methods: { }, }; </script>
子组件
<template> <div> <input type="text" :value="firstName" @input="$emit('update:firstName', $event.target.value)" /> <input type="text" :value="lastName" @input="$emit('update:lastName', $event.target.value)" /> </div> </template> <script> export default { name: "UserName", components: {}, props: ["firstName", "lastName"], data() { return {}; }, methods: {}, }; </script>
以上也可以实现 父子组件的双向绑定
绑定单个 v-model
当使用在一个组件上时,v-model 会被展开为如下的形式:
<UserName v-model="first" /> <!-- 上面等同于下面的写法 --> <UserName :modelValue="first" @input="first= $event.target.value" />
父组件
<template> <div> <h1>{{ first }}-{{ last }}</h1> <UserName v-model="first" /> </div> </template> <script> import UserName from "./UserName.vue"; export default { name: "V-Model", components: { UserName, }, data() { return { first: "000", last: "123", }; }, methods: { }, }; </script>
子组件
<template> <div> <input type="text" :value="firstName" @input="$emit('update', $event.target.value)" /> </div> </template> <script> export default { name: "UserName", components: {}, props: ["firstName"], model: { prop: "firstName", event: "update", }, data() { return {}; }, }; </script>
现在可以实现单个 输入框绑定
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。
赞 (0)