Vue3中父组件传子组件，子组件想修改父组件传的参数，注意点

简单记录，因为在vue2.x版本本，子组件一般会通过watch 对应的prop属性key去重新赋值给子组件data中定义的参数（用来接收父组件传的参数）

因为Vue3的提供了setup，我们通常会在里面使用watch()去监听，和Vue2.x会有所不同

//子组件：
<script lang="ts">
import { defineComponent, ref, watch } from 'vue'
let _props = {
    msg: {
        type: String,
        default: "留言"
    }
}
export default defineComponent({
    name: "DemoCom",
    props: _props,
    setup(props,ctx) {
        console.log("lai", props)
        let count = ref(props.msg)
        // 监听父组件传的值
        watch(()=> props.msg, (a,b)=>{
            console.log("a",a);
            count.value = a
        })
        function toFather(){
            ctx.emit("tets", {msg: "ccc"})
        }
        return {
            toFather,
            count
        }
    },
})
</script>

<template>
    <div v-html="count" @click="toFather"></div>
</template>

//父组件
<template>
  <DemoCom :msg="msg" @tets="handlerGet"/>
  <el-button type="primary" @click="handlerClick">Primary</el-button>
</template>

<script lang="ts">
import DemoCom from "../components/DemoCom.vue"
interface Msg {
  name: string;
  age?: number;
}
let _props = {
  sex:{
    type: String,
    default: '性别'
  },
  id:{
    type: String,
    default: 'sdgdg134'
  }
}
import { defineComponent, reactive, ref } from "vue"; // @ is an alias to /src
export default defineComponent({
  name: "Home",
  components: { DemoCom },
  props: _props,
  setup() {
    let msg = ref("")
    function handlerGet(val: string){
      console.log("数据", val)
    }
    function handlerClick(){
      msg.value = "hahaha"
    }
    return {
      handlerGet,
      handlerClick,
      msg
    }
  },
});
</script>