vue3 父子組件共享響應式對象

共享的情況

父組件

<template lang="">
  <div>
    <div class="greetings">按鈕值：{{ num }}</div>
    <div>
      <button @click="num++">按鈕</button>
    </div>

    <div> i am parent</div>
    <button @click="addList">list新增</button>
    <ul>
      <li v-for="item in list">{{item}}</li>
    </ul>
    <Child :list="list"></Child>
  </div>
</template>
<script>
export default {};
</script>
<script setup>
import { ref } from "vue";
import Child from './Child.vue'
const num = ref(0);
const list = ref([
  '標題1', '標題2'
])
let i = 2;
const addList = () => {
  list.value.push('標題' + ++i)
}
</script>
<style lang=""></style>

子組件

<template lang="">
  <div>
    <p>i am child</p>
    <ul>
      <li v-for="item in props.list">{{item}}</li>
    </ul>
    <button @click='deleteOne'>刪除list</button>
  </div>
</template>
<script>
export default {};
</script>

<script setup>
const a = 1;
const props = defineProps(['list'])
console.log('獲取到的props', props)
console.log('獲取到的props.list', props.list)
// console.log(list)
// const list = ref(['2123'])
const deleteOne = () => {
  let list = props.list 
  list.splice(0, 1)
}
</script>
<style lang=""></style>

最終效果

初始

點擊父組件新增

點擊子組件刪除

無法共享的情況

上個例子是父組件向子組件傳遞了一個響應式的對象，vue沒有自動解包，子組件也是同一個響應式組件就有用，如果是一個普通的ref就有問題
例如

父組件

const visible = ref(false)
<Child :list="list" :attr="attr" :visible="visible"></Child>

子組件

const props = defineProps(['list', 'attr', 'visible'])
console.log('獲取到的props.visible', props.visible)

原因就是父組件賦值的時候，visible就自動解包爲false了，而不是響應式的，爲了解決這個問題，必須包裝一層。

修改後的父

<Child :list="list" :attr="attr" :visible="visible"></Child>
// 這裏使用ref包裝會有問題
const attr = reactive({
  visible: false
})

或者
const visible = ref(false)
const attr = {
	"visible": visible
}
子的使用attr.visible.value改變值

修改後的子

const props = defineProps(['list', 'attr', 'visible'])
console.log('獲取到的props.attr', props.attr)

模板裏使用就props.attr.XXX

問題

reactive裏對象的屬性有ref的，這種事怎麼代理的？