Vue3 使用v-model实现父子组件通信的方法(常用在组件封装规范中)
更新时间：2024年06月18日 09:35:32 作者：心潮的滴滴
这篇文章主要介绍了Vue3 使用v-model实现父子组件通信(常用在组件封装规范中)的方法,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
历史小剧场
历史告诉我们，痞子就算混一辈子，也还是痞子，滑头，最后只能滑自己。长得帅，不能当饭吃。
成大器者的唯一要诀，是能吃亏。
吃亏就是占便宜，原先我不信，后来我信了，相当靠谱。----《明朝那些事儿》
概述
v-mode实现父子组件数据同步原理主要分为：
- 父组件添加modelValue绑定数据且传递到子组件，然后绑定@update:modelValue事件接收子组件传过来的值
- 子组件内部使用defineProps来接收父组件modelValue传过来的值，使用defineEmits自定义事件修改值然后触发父组件@update绑定的事件
同步单个数据
父组件
<!-- -->
<template>
<div>
<!-- v-model用在HTML上 -->
<!-- <input type="text" v-model="username"> -->
<!-- <input type="text" :value="username" @input="username = (<HTMLInputElement>$event.target)!.value" /> -->
<h4>账号: {{ username }}</h4>
<h4>密码: {{ pwd }}</h4>
<!-- v-model用在自定义组件上 -->
<!-- <XinchaoInput v-model:username="username" v-model:pwd="pwd" /> -->
<XinchaoInput
:username="username"
@update:username="username = $event" />
</div>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue';
import XinchaoInput from './XinchaoInput.vue';
const username = ref<string>("张三")
const pwd = ref<string>("123131")
watch(username, (oldValue, newValue) => {
console.log(newValue)
})
</script>
<style lang="scss" scoped>
</style>子组件
<!-- -->
<template>
<div>
<input type="text"
:value="username"
@input="emit('update:username', (<HTMLInputElement>$event.target)!.value)" />
<!-- <br>
<input type="text"
:value="pwd"
@input="emit('update:pwd', (<HTMLInputElement>$event.target)!.value)" /> -->
</div>
</template>
<script setup lang="ts">
defineProps(['username', 'pwd'])
const emit = defineEmits(['update:username', 'update:pwd'])
</script>
<style lang="scss" scoped>
input {
border: 2px solid #ccc;
border-radius: 5px;
padding: 2px;
background-color: darkcyan;
color: white;
}
</style>同步多个数据
父组件
<!-- -->
<template>
<div>
<!-- v-model用在HTML上 -->
<!-- <input type="text" v-model="username"> -->
<!-- <input type="text" :value="username" @input="username = (<HTMLInputElement>$event.target)!.value" /> -->
<h4>账号: {{ username }}</h4>
<h4>密码: {{ pwd }}</h4>
<!-- v-model用在自定义组件上 -->
<XinchaoInput v-model:username="username" v-model:pwd="pwd" />
<!-- <XinchaoInput
:username="username"
@update:username="username = $event" /> -->
</div>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue';
import XinchaoInput from './XinchaoInput.vue';
const username = ref<string>("张三")
const pwd = ref<string>("123131")
watch(username, (oldValue, newValue) => {
console.log(newValue)
})
</script>
<style lang="scss" scoped>
</style>子组件
<!-- -->
<template>
<div>
<input type="text"
:value="username"
@input="emit('update:username', (<HTMLInputElement>$event.target)!.value)" />
<br>
<input type="text"
:value="pwd"
@input="emit('update:pwd', (<HTMLInputElement>$event.target)!.value)" />
</div>
</template>
<script setup lang="ts">
defineProps(['username', 'pwd'])
const emit = defineEmits(['update:username', 'update:pwd'])
</script>
<style lang="scss" scoped>
input {
border: 2px solid #ccc;
border-radius: 5px;
padding: 2px;
background-color: darkcyan;
color: white;
}
</style>到此这篇关于Vue3 使用v-model实现父子组件通信（常用在组件封装规范中）的文章就介绍到这了,更多相关Vue3 v-model父子组件通信内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vue 单元测试的相关资料，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下2021-04-04
这篇文章主要介绍了vue下如何利用canvas实现在线图片标注，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
在Vue项目中使用markdown-it组件预览Markdown内容时,通过安装pnpm和markdown-it-github-markdown-css依赖,并重写markdown部分样式,实现了Markdown内容的美化,在MarkdownPreview.vue组件中,通过变量renderedMarkdown接收并渲染Markdown内容2025-10-10
这篇文章主要介绍了vue-cli4.0如何配置CDN加速问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
本文详细讲解了Vue3生命周期函数和方法。对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-12-12
这篇文章主要介绍了VUE项目中调用高德地图的全流程讲解，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
Vue ElementUi同时校验多个表单(巧用new promise)
这篇文章主要介绍了巧用new promise实现Vue ElementUi同时校验多个表单功能，实现的方法有很多种，本文给大家带来的是一种比较完美的方案,需要的朋友可以参考下2018-06-06
uView是uni-app生态专用的UI框架,uni-app 是一个使用 Vue.js 开发所有前端应用的框架,这篇文章主要给大家介绍了关于uniapp使用uview的简单案例,需要的朋友可以参考下2023-03-03
这篇文章主要为大家详细介绍了Vue实现首页banner自动轮播效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
vue axios调用接口方法报错500 internal server err
前端使用axios 访问后端接口时报错,在浏览器中点击红色的报错数据,本文给大家分享vue axios调用接口方法报错500 internal server error的两种解决方法,感兴趣的朋友一起看看吧2023-10-10
最新评论