本篇内容介绍了“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 会简化上面的写法，父组件不需要定义更新触发函数（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 会被展开为如下的形式：
<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>现在可以实现单个 输入框绑定
“Vue2子组件怎么绑定v-model实现父子组件通信”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
原文链接：https://blog.csdn.net/qq_52855464/article/details/129762831
