同一个页面调用两次子组件的问题

在项目当中会有这样的场景,在同一个页面需调用两次子组件但传给子组件的内容是不一样的,并要使子组件把对应的值返回来

父组件:

<template>
  <div>
    <hello-world ref="s" :msg="obj.name"></hello-world> //子组件
    <hello-world ref="m" :msg="obj.age"></hello-world> //子组件
    <button @click="aa">按钮</button>
  </div>
</template>

<script>
import { reactive } from "@vue/reactivity";
import { onMounted, ref } from "vue";
import HelloWorld from "./components/HelloWorld.vue";
export default {
  components: {
    HelloWorld,
  },
  setup() {
    let obj = reactive({
      name: "张三",
      age: 23,
    });
    let s = ref(null);//获取第一个子组件
    let m = ref(null);//获取第二个子组件
    function aa() { //这个函数可以得到子组件传递过来的数据
      let a=s.value.ss();// 第一个组件的方法
      let b=m.value.ss()// 第二个组件的方法
      console.log(a,b);
    }

    onMounted(() => {
      console.log(s);
    });
    return {
      aa,
      obj,
      s,
      m,
    };
  },
};
</script>

子组件:

<template>
  <div>
    <input v-model="msg" type="text" />
  </div>
</template>

<script>
import { ref } from "@vue/reactivity";
export default {
  props: {
    msg: {},
  },
  setup(props,{ expose }) {
    function ss() {
      return props
    }
    expose({ //暴露方法
      ss,
    });
    return {
      ss,
    };
  },
};
</script>

效果图:

点击按钮控制台显示: