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

<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>

<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>

<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>

const emit = defineEmit(['update: 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>