父組件傳入子組個(gè)的變量， 子組件是無(wú)法直接修改的， 只能通過(guò) 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>

父組件的寫法沒(méi)有變， 子組件的寫法就有很大的變化了

<template><div class="son">son{{msg}}<hr/>{{obj.name}}{{obj.age}}</div><button @click="changemsg">changemsg</button><button @click="changeobjname(3)" type="button">changeobjname</button><button @click="changeobjage(42)" type="button">changeobjage</button>
</template><script setup>
//這里定義了一個(gè) props來(lái)接收傳來(lái)的屬性
//使用時(shí)可以是 {{msg}}  也可以使用 {{props.msg}}let props = defineProps({msg:{type:String,default:""},obj:{type:Object,default:{}}})//這里定義了三個(gè)自定義事件const emit = defineEmits(["changeobjnameEmit","changeobjageEmit","changemsgEmit"]);//下面是通過(guò)事件調(diào)用了三個(gè)自定義的事件const changeobjname = ()=>{let objname = {newname:"hahaha"}emit("changeobjnameEmit",objname)}const changeobjage = (age)=>{emit("changeobjageEmit",age)}const changemsg = ()=>{emit("changemsgEmit",["aa","bb","cc"]);}</script>