vue3 <script setup>通过ref修改子组件的数组数据

可以使用`toRef`和`toRefs`来将子组件的数组数据转换为响应式的对象，然后通过修改这个对象来修改子组件的数组数据。

例如，假设子组件中有一个名为`list`的数组数据，可以在父组件中这样使用`toRef`来将其转换为响应式的对象：

import { toRef } from 'vue'

setup() {
  const childComponentRef = ref(null)
  const listRef = toRef(childComponentRef.value, 'list')

  const modifyList = () => {
    listRef.value.push('new item')
  }

  return {
    childComponentRef,
    modifyList
  }
}

然后在模板中，可以将子组件的`ref`属性绑定到`childComponentRef`上，并在需要的地方调用`modifyList`方法来修改子组件的数组数据：

<template>
  <child-component ref="childComponentRef" />
  <button @click="modifyList">修改子组件数组数据</button>
</template>

相关问题

vue2.7 <script setup> 使用 透传属性，怎么用

在 Vue 2.7 中，`<script setup>` 特性引入了更简洁的组件编写方式，其中包含 `ref` 和 `reactive` 等用于状态管理的新语法。如果你想通过`<script setup>`传递值到模板上，并保持其在组件间的“穿透”（即父子组件间的通信），你可以这样做：

1. **直接注入**: 如果你想将一个简单的值从父组件传递给子组件，你可以使用`v-bind`或`props`标签：

<!-- 父组件 -->
<template>
  <child-component :myProp="parentValue" />
</template>

<script setup>
import { ref } from 'vue'
const parentValue = ref('Hello, World')
</script>

<!-- 子组件 -->
<template>
  <div>{{ myProp }}</div>
</template>

<script setup>
export default {
  props: ['myProp']
}
</script>

2. **响应式对象**: 如果你需要更复杂的对象或数组，可以使用`reactive`创建响应式对象，它同样会被自动地穿透：

<!-- 父组件 -->
<template>
  <child-component :myObject="parentObject" />
</template>

<script setup>
import { reactive } from 'vue'
const parentObject = reactive({ name: 'John', age: 30 })
</script>

<!-- 子组件 -->
<template>
  <div>Name: {{ myObject.name }} | Age: {{ myObject.age }}</div>
</template>

<script setup>
export default {
  props: ['myObject']
}
</script>

记得在子组件中使用点`.`访问属性，因为`<script setup>`不会像常规`methods`那样自动导出对象的方法。

vue3通过ref修改子组件的数组数据

可以通过在子组件中使用 ref，然后在父组件中通过 ref 获取子组件实例，并调用子组件的方法来修改子组件的数组数据。

例如，假设子组件名为 Child，数组数据名为 list，可以如下定义子组件：

<template>
  <div>
    <div v-for="(item, index) in list" :key="index">
      {{ item }}
    </div>
  </div>
</template>

<script>
export default {
  name: 'Child',
  props: {
    list: { type: Array }
  }
}
</script>

在父组件中，可以使用 ref 获取子组件实例，并调用子组件的方法来修改子组件的数组数据：

<template>
  <div>
    <button @click="changeList">修改子组件数组</button>
    <Child ref="child" :list="list"></Child>
  </div>
</template>

<script>
import { ref } from 'vue'
import Child from './Child.vue'

export default {
  name: 'Parent',
  components: { Child },
  setup() {
    const list = ref(['A', 'B', 'C'])
    const changeList = () => {
      const child = this.$refs.child
      if (child) {
        child.list[0] = 'D'
        child.list[1] = 'E'
        child.list[2] = 'F'
      }
    }
    return { list, changeList }
  }
}
</script>

在修改子组件的数组数据时，需要注意的是，直接修改子组件的数组数据可能会导致 Vue 的响应式系统失效，因此最好使用 Vue 提供的 API 来修改数据，例如使用 `splice` 方法来替换数组元素。