本篇内容介绍了“Vue2子组件怎么绑定v-model实现父子组件通信”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
前言
v-model 可以在组件上使用以实现双向绑定。
首先让我们回忆一下 v-model 在原生元素上的用法：
<input v-model="firstName" />
在代码背后，模板编译器会对 v-model 进行更冗长的等价展开。因此上面的代码其实等价于下面这段：
<input :value="firstName" @input="firstName = $event.target.value" />
默认用法
父组件
<template>
<div>
<h2>{{ first }}-{{ last }}</h2>
<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>
<h2>{{ first }}-{{ last }}</h2>
<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>
<h2>{{ first }}-{{ last }}</h2>
<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>现在可以实现单个 输入框绑定