vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue3父子同信

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

作者: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父子同信内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文