亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

<p>給定以下在Vue.js 3中的組合式 'useNumbers.js'，我希望元件中的 'numbers' 具有響應(yīng)性。但是，在一個(gè)元件中加入新的值到 'numbers' 中並不會(huì)在第二個(gè)元件中反映出來。 <br /><br />useNumbers.js:</p><p><br /></p> <pre class="brush:php;toolbar:false;">import { ref } 從 'vue'; export default function() { const numbers = ref([1, 2, 3, 4, 5]); const addNumber = num => { numbers.value.push(num); } const filterNumber = minNum => { return numbers.value.filter(curNum => curNum >= minNum); } return { numbers, addNumber, filterNumber } }</pre> <p>Component A:</p> <pre class="brush:php;toolbar:false;"><template> <div> <h1>Child component</h1> <p>{{ numbers }}</p> <button @click="addNumber(45)">Add 45</button> <div class="line"></div> <GrandChild /> </div> </template> <script setup> import useNumbers from '../composables/useNumbers'; import GrandChild from './GrandChild.vue'; const { numbers, addNumber } = useNumbers() </script></pre> <p>Component B:</p> <pre class="brush:php;toolbar:false;"><template> <div> <h1>GreatGrandChild component</h1> <p>{{ numbers }}</p> <div class="line"></div> </div> </template> <script setup> import useNumbers from '../composables/useNumbers'; const { numbers } = useNumbers(); </script></pre> <p>每當(dāng)我在元件A中點(diǎn)擊按鈕（將45加入陣列），這個(gè)變化不會(huì)在元件B中反映出來。我知道，像解構(gòu)賦值這樣的操作會(huì)導(dǎo)致丟失響應(yīng)性。 </p> <pre class="brush:php;toolbar:false;">const { numbers, addNumber } = useNumbers()</pre> <p>破壞了響應(yīng)性。我嘗試使用toRef和toRefs進(jìn)行了一些嘗試，但目前還沒有找到解決方案。 </p>

import { ref } from 'vue';

const numbers = ref([1, 2, 3, 4, 5]);

export default function() { 
  ...
  return { numbers }
}