我要评论一、第一种，通过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父子组件通信内容请搜索代码网以前的文章或继续浏览下面的相关文章希望大家以后多多支持代码网！
发表评论