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

<p>Given the following combined 'useNumbers.js' in Vue.js 3, I want 'numbers' in the component to be responsive. However, adding a new value to 'numbers' in one component will not be reflected in the second component. <br /><br />useNumbers.js:</p><p><br /></p> <pre class="brush:php;toolbar:false;">import { ref } from '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> Whenever I click the button in component A (adding 45 to the array), this change is not reflected in component B. I know that operations like destructuring assignment result in loss of responsiveness. </p> <pre class="brush:php;toolbar:false;">const { numbers, addNumber } = useNumbers()</pre> <p>Broken responsiveness. I've tried a few things using toRef and toRefs but haven't found a solution yet. </p>

import { ref } from 'vue';

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

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