vue3组合式api ＜script setup＞ props 父子组件的写法

父组件传入子组个的变量， 子组件是无法直接修改的， 只能通过 emit的方式， 让父组件修改， 之后子组件更新

<template>
  <div class="parent">
    我是父组件
    <son :msg="msg" :obj="obj" @changemsgEmit="changemsgEmit" @changeobjnameEmit="changeobjnameEmit" @changeobjageEmit="changeobjageEmit"></son>
  </div>
</template>

<script setup>
  import {ref, reactive} from "vue";
  import son from "./son.vue"

  let msg = ref("this msg form parent.vue");

  let obj = reactive({
    name:"huang",
    age:39
  })

  const changeobjageEmit = (params)=>{
    obj.age = params;
  }

  const changeobjnameEmit = (params)=>{
    obj.name = params.newname;
  }

  const changemsgEmit = (params)=>{
    console.log(params);
    msg.value = params.join("");
  }

</script>

<style scoped>

</style>

父组件的写法没有变， 子组件的写法就有很大的变化了