vue3父子组件通信之子组件修改父组件传过来的值

更新时间：2024年05月28日 10:51:06 作者：我爱加班

这篇文章主要介绍了vue3父子组件通信之子组件修改父组件传过来的值,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧

一、第一种，通过props方式传值：

父组件：

父组件调用子组件Child1时通过 :msg2= "msg2"把msg2的数据传给子组件，并且通过自定义事件接收子组件的emit通知，用来修改父组件的msg2数据。

源码：

<template>
  <div>
    我是home组件 父组件
    <h1>{{ msg }}</h1>
    <div>父组件--props方式传值：{{ msg2 }}</div>
    <Child1 :msg2="msg2" @event="eventFn" />
  </div>
</template>
<script setup>
import { ref } from 'vue'
import Child1 from './child1.vue'
const props = defineProps(['msg'])
const msg2 = ref('今天是星期三，多云。')
const eventFn = (val) => {
    msg2.value = val
}
</script>

子组件：

子组件通过defineProps接收一下msg2 ，可以直接展示在模板上，子组件自定义emit事件去通知父组件修改msg2的数据，数值是子组件传过去的。

源码:

<template>
  <div>
    <h3>大家好，我是子组件1</h3>
    <button @click="handleClick">修改父组件数据msg2</button>
    <div>子组件——props方式传过来：{{ msg2 }}</div>
  </div>
</template>
<script setup>
import { ref, reactive } from 'vue'
const props = defineProps(['msg2'])
const emit = defineEmits(['event'])
const handleClick = () => {
    emit('event', '希望早日出太阳，暴富而不是暴晒！')
}
</script>

点击前：

点击后：

二、第二种，通过v-model+冒号+要传的值的方式（这个v-model可以写多个）：

父组件：

父组件调用子组件时，通过v-model:num="num" 的方式传值给子组件。

源码：

<template>
  <div>
    我是home组件 父组件
    <h1>{{ msg }}</h1>
    <div>父组件--props方式传值：{{ msg2 }}</div>
    <div>父组件num——v-model方式传值：{{ num }}</div>
    <Child1
     :msg2="msg2" @event="eventFn"
     v-model:num="num"
     />
  </div>
</template>
<script setup>
import { ref, reactive } from 'vue'
import Child1 from './child1.vue'
const props = defineProps(['msg'])
const msg2 = ref('今天是星期三，多云。')
const num = ref(0)
const eventFn = (val) => {
    msg2.value = val
}
</script>

子组件：

子组件也先通过defineProps接收一下num，并展示。然后通过自定义emit事件

const emit = defineEmit(['update: num'])

然后通过点击事件updateNum方法来触发通知父组件修改num数据。

源码：

<template>
  <div>
    <h3>大家好，我是子组件1</h3>
    <button @click="handleClick">修改父组件数据msg2</button>
    <div>子组件——props方式传过来：{{ msg2 }}</div>
    <button @click="updateNum">修改父组件num</button>
    <div>子组件num——v-model方式传过来：{{ num }}</div>
  </div>
</template>
<script setup>
import { ref, reactive } from 'vue'
const props = defineProps(['msg2','num'])
const emit = defineEmits(['event', 'update:num'])
const handleClick = () => {
    emit('event', '希望早日出太阳，暴富而不是暴晒！')
}
const updateNum = () => {
    emit('update:num', 222)
}
</script>

点击前：

点击后：

三、父组件调用子组件时，通过v-model传多个值

父组件写法：

子组件写法：

效果：

以上就是vue3中，props和v-model两种常用的父子组件通信方法。

到此这篇关于vue3父子组件通信子组件修改父组件传过来的值的文章就介绍到这了,更多相关vue3父子组件通信内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue实现几秒后跳转新页面代码
这篇文章主要介绍了vue实现几秒后跳转新页面代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-09-09
vue生成token保存在客户端localStorage中的方法
本篇文章主要介绍了vue生成token保存在客户端localStorage中的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-10-10
vue中关于$emit和$on的使用及说明
这篇文章主要介绍了vue中关于$emit和$on的使用及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
浅谈一下Vue生命周期中mounted和created的区别
每一个vue实例从创建到销毁的过程，就是这个vue实例的生命周期,在这个过程中，他经历了从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程,那么这些过程中，具体vue做了些啥，我们今天来了解一下
2023-05-05
Vue中Axios的封装与接口管理详解
在vue项目中和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库,可运行在浏览器端和node.js中,下面这篇文章主要给大家介绍了关于Vue中Axios的封装与接口管理的相关资料,需要的朋友可以参考下
2022-03-03
Vue路由之JWT身份认证的实现方法
这篇文章主要介绍了Vue路由之JWT身份认证的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-08-08
vue中 v-for循环的用法详解
这篇文章主要介绍了vue中 v-for循环的用法详解,本文通过实例代码的形式给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2020-02-02
vue3中的elementPlus全局组件中文转换方式
这篇文章主要介绍了vue3中的elementPlus全局组件中文转换方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-07-07
Vue监听数据的原理详解
本篇文章主要介绍了Vue监测数据的原理，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看
2021-10-10
Vue使用Vuex一步步封装并使用store全过程
这篇文章主要介绍了Vue使用Vuex一步步封装并使用store全过程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-01-01