Vue2子组件绑定v-model,实现父子组件通信方式
短信预约 -IT技能 免费直播动态提醒
前言
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>现在可以实现单个 输入框绑定
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
