Vue2子组件绑定 v-model,实现父子组件通信方式
作者：潮汐未见潮落
这篇文章主要介绍了Vue2子组件绑定 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>现在可以实现单个 输入框绑定
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。