vue3父子同信的双向数据的项目实现

更新时间：2023年08月08日 11:59:05 作者：weixin_47389477

我们知道的是，父传子的通信，和子传父的通信，那如何实现父子相互通信的呢，本文就来详细的介绍一下，感兴趣的可以了解一下

前言：

我们知道的是，父传子的通信，和子传父的通信，那如何实现父子相互通信的呢？

(vue3中)v-model 和modelValue结合使用,在vue2中使用的是.sync

在父组件的写法

<template>
<Son v-model="num" /> 
</template>
<script setup>
import Son from "./children.vue"
import {ref} form 'vue'
const num = ref(0)
</script>

子组件的写法

<template>
<div>{{modelValue}} </div>
<button @click="addNum">按钮</button>
</template>
<script setup>
const props =difineProps({
modelValue:Number
})
const emit = difineEmit(["update:modelValue"])
const addNum = ()=>{
emit("update:modelValue",modelValue++)
}
</script>

另一种是在父组件中v-model:XX,在子组件中用XX

在父组件的写法

<template>
<Son v-model:val="num" /> 
</template>
<script setup>
import Son from "./children.vue"
import {ref} form 'vue'
const num = ref(0)
</script>

子组件的写法

<template>
<div>{{num}} </div>
<button @click="addNum">按钮</button>
</template>
<script setup>
import {ref} form 'vue'
const props =difineProps({
val:Number
})
const num = ref(props.val)
const emit = difineEmit(["update:val"])
const addNum = ()=>{
emit("update:val",num++)
}
</script>

到此这篇关于vue3父子同信的双向数据的项目实现的文章就介绍到这了,更多相关vue3父子同信内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue3中如何使用iframe嵌入vue2页面
这篇文章主要介绍了vue3中如何使用iframe嵌入vue2页面问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
vue+el-upload实现多文件动态上传
这篇文章主要为大家详细介绍了vue+el-upload实现多文件动态上传，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-10-10
解决vue更新路由router-view复用组件内容不刷新的问题
今天小编就为大家分享一篇解决vue更新路由router-view复用组件内容不刷新的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-11-11
el-tooltip根据条件控制显示的示例代码
这篇文章主要介绍了el-tooltip根据条件控制显示的示例代码,包括列表型和树状图型,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
2023-12-12
前端vue如何根据菜单自动生成路由(动态配置前端路由)
估计有不少人遇过这样的需求:根据后台数据动态添加路由和菜单,这篇文章主要给大家介绍了关于前端vue如何根据菜单自动生成路由的相关资料,需要的朋友可以参考下
2024-04-04
详细聊聊Vue的混入和继承
混入(mixin)是一种非常灵活的方式,用来分发Vue组件中可复用的功能,一个混入对象可以包含任意组件选项,下面这篇文章主要给大家介绍了关于Vue混入和继承的相关资料,需要的朋友可以参考下
2021-09-09
使用proxytable 配置解决 vue-cli 的跨域请求问题【推荐】
这篇文章主要介绍了利用 proxytable 配置解决 vue-cli 的跨域请求问题,本文的目录结构基于 webpack 模板结构，需要的朋友可以参考下
2018-05-05
vue composition-api 封装组合式函数的操作方法
在 Vue 应用的概念中，“组合式函数”(Composables) 是一个利用 Vue 的组合式 API 来封装和复用有状态逻辑的函数，这篇文章主要介绍了vue composition-api 封装组合式函数的操作方法,需要的朋友可以参考下
2022-10-10
Vue render渲染时间戳转时间,时间转时间戳及渲染进度条效果
这篇文章主要介绍了Vue render渲染时间戳转时间,时间转时间戳及渲染进度条效果,通过实例代码相结合的形式给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2018-07-07
项目中Axios二次封装实例Demo
vue项目经常会用到axios来请求数据,那么首先肯定需要对这个请求方法进行一个二次封装,这篇文章主要给大家介绍了关于项目中Axios二次封装的相关资料,需要的朋友可以参考下
2021-06-06