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父子同信内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本文通过实例代码给大家介绍了Vuejs中的watch，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧2020-01-01
这篇文章主要介绍了vue-router为激活的路由设置样式操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
这篇文章主要介绍了谈谈我在vue-cli3中用预渲染遇到的坑，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-04-04
这篇文章主要介绍了vue 父组件中调用子组件函数的方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下2019-06-06
这篇文章主要为大家详细介绍了vue实现书籍购物车功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
导航守卫就是路由跳转前、中、后过程中的一些钩子函数，本文详细的介绍了Vue中路由守卫的具体使用，具有一定的参考价值，感兴趣的可以了解一下2021-12-12
这篇文章主要介绍了解决vue-cli3 使用子目录部署问题,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-07-07
这篇文章主要介绍了el-select 下拉框多选实现全选的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
当你跑起一个项目的时候,第一步需要先安装依赖npm install,下面这篇文章主要给大家介绍了关于vue踩坑之npm install报错问题解决的相关资料,需要的朋友可以参考下2022-06-06
这篇文章主要为大家介绍了Transition内置组件使用示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-07-07
最新评论