本篇内容介绍了“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实现父子组件通信”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。