<p>次の Vue.js 3 の「useNumbers.js」を組み合わせた場合、コンポーネント内の「numbers」が応答するようにしたいと考えています。ただし、1 つのコンポーネントの「数値」に新しい値を追加しても、2 番目のコンポーネントには反映されません。 <br /><br />useNumbers.js:</p><p><br /></p> <pre class="brush:php;toolbar:false;">import { ref } from 'vue'; デフォルト関数をエクスポート() { const 数値 = ref([1, 2, 3, 4, 5]); const addNumber = num => { 数値.値.プッシュ(数値); } const filterNumber = minNum => { 戻り値.value.filter(curNum => curNum >= minNum); } return { 数値、addNumber、filterNumber } }</pre> <p>コンポーネント A:</p> <pre class="brush:php;toolbar:false;"><テンプレート> <div> <h1>子コンポーネント</h1> <p>{{ 数字 }}</p> <button @click="addNumber(45)">45 を追加</button> <div class="line"></div> <孫 /> </div> </テンプレート> ＜スクリプト設定＞ useNumbers を '../composables/useNumbers' からインポートします。 './GrandChild.vue' から GrandChild をインポートします。 const {数値, addNumber} = useNumbers() </script></pre> <p>コンポーネント B:</p> <pre class="brush:php;toolbar:false;"><テンプレート> <div> <h1>GreatGrandChild コンポーネント</h1> <p>{{ 数字 }}</p> <div class="line"></div> </div> </テンプレート> ＜スクリプト設定＞ useNumbers を '../composables/useNumbers' からインポートします。 const {数値} = useNumbers(); </script></pre> <p> コンポーネント A のボタンをクリックしても (配列に 45 を追加します)、この変更はコンポーネント B に反映されません。代入の構造化などの操作により応答性が失われることはわかっています。 </p> <pre class="brush:php;toolbar:false;">const {数値, addNumber } = useNumbers()</pre> <p>応答性が壊れています。 toRef と toRefs を使用していくつかのことを試しましたが、まだ解決策が見つかりません。 </p>