背景

---

網上說了很多解決方案，都是通過watch(() => props.value, (newValue, oldValue) => {})解決，或者是加上{deep: true}附加屬性。但是我在Vue3.3.4中，還是無法解決。
下面說一下我的解決方案。

解決方案

---

通過父組件調用子組件defineExpose出來的方法，并在方法中重新賦值ref數據，已修改界面。
實例代碼：
B.vue

const props = defineProps({propsObj: Array
})
const refObj = ref(props.propsObj)defineExpose({'resetProps'})function resetProps() {refObj.value = [...props.propsObj]	// 必須要重新賦值新的值，不然ref地址值不改變，界面不更新
}

A.vue

function process() {// 做一些對象處理childComponent.resetProps()
}

當執行自定義resetProps后，界面就會更改了。

或者傳入一個callback也是可以的，在A中調用callback也可以。