vue3 子组件值传给父组件非响应式

最近在学vue，通过defineEmits，在自组件中为父组件中的响应式数据赋值，发现并没有响应式的刷新显示，有点困惑，是设定如此吗？
子组件

<script setup lang="ts">
import { ref } from 'vue'
  defineProps({
    num: {},
    msg: {
      type: String,
      default: "",
    },
  });
  defineEmits(["update","deliver"]);
</script>
<template>
  <div class="child">
    子组件
    <h3>接受到父组件的值:{{ num }}and{{ msg }}</h3>
    <button @click="$emit('update')">改变父组件值</button>
    <button @click="$emit('deliver','hello')">传值给父组件</button>
  </div>
</template>

父组件

<script setup lang="ts">
import { ref } from 'vue';
import child from './child.vue';
    var msg="父组件的msg"
    var num=ref(10);
    var childMsg=ref('dasd')
const updateValue=()=>{
    msg="被修改",
    num.value+=2
}
const getChildValue=(v)=>{
    childMsg=v
    console.log(childMsg);
    
}
</script>
<template>
    <div>
        父组件接受子组件的数据{{childMsg}}
        <child :msg="msg" :num="num" @update="updateValue" @deliver="getChildValue"></child>
    </div>
</template>

点击“改变父组件值”按钮后，刷新了

付组件

<script setup lang="ts">
import { ref } from 'vue';
import child from './child.vue';

var msg = ref("父组件的msg");
var num = ref(10);
var childMsg = ref('dasd');

const updateValue = () => {
  msg.value = "被修改";
  num.value += 2;
};

const getChildValue = (v) => {
  childMsg.value = v;
  console.log(childMsg.value);
};
</script>

<template>
  <div>
    父组件接受子组件的数据 {{ childMsg }}
    <child :msg="msg" :num="num" @update="updateValue" @deliver="getChildValue"></child>
  </div>
</template>

• 这篇博客: Vue3父子组件间传参通信中的 二、子传父 defineEmits 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

• 子组件传值给父组件主要是子组件通过defineEmits注册一个自定义事件，而后触发emit去调用该自定义事件，并传递参数给父组件。

  在父组件中调用子组件时，通过v-on绑定一个函数，通过该函数获取传过来的值。

  如下为子组件Son.vue

  <template>
    <div style="margin: 10px;border: 2px solid red">
      我是子组件
      <button @click="transValue" style="margin: 5px">传值给父组件</button>
    </div>
  </template>
  
  <script setup lang="ts">
  import {ref} from "vue";
  
  // 定义所要传给父组件的值
  const value = ref<String>("我是子组件传给父组件的值")
  
  // 使用defineEmits注册一个自定义事件
  const emit = defineEmits(["getValue"])
  
  // 点击事件触发emit，去调用我们注册的自定义事件getValue,并传递value参数至父组件
  const transValue = () => {
    emit("getValue", value.value)
  }
  
  </script>
  

  如下为父组件Father.vue

  <template>
    <div class="fa">
      <div style="margin: 10px;">我是父组件</div>
      父组件接收子组件传的值：{{sonMessage}}
      <Son @getValue="getSonValue"></Son>
    </div>
  </template>
  
  <script setup lang="ts">
  import Son from './Son.vue'
  import {ref} from "vue";
  
  const sonMessage = ref<string>("")
  const getSonValue = (value: string) => {
    sonMessage.value = value
  }
  </script>
  
  <style scoped>
  .fa{
    border: 3px solid cornflowerblue;
    width: 400px;
    text-align: center;
  }
  </style>
  
  

  父组件Father.vue中在调用Son.vue这个子组件时，当子组件Son.vue需要传参给父组件Father.vue时，使用defineEmits注册一个事件getValue，而后设置点击事件transValue去触发emit，去调用我们注册的自定义事件getValue,并传递value参数至父组件。

  父组件Father.vue在获取子组件Son.vue传过来的值时，通过在子组件上使用v-on设置响应函数getValue（该函数与子组件中的注册自定义事件getValue名称需一致）,并绑定一个函数getSonValue来获取传过来的值。