将引用数组传递给子组件时，如何使引用数组在 Vue 3 组合 API 中工作？答案

【问题标题】：How to make ref arrays work in Vue 3 composition API when passing them to child components?将引用数组传递给子组件时，如何使引用数组在 Vue 3 组合 API 中工作？
【发布时间】：2020-05-16 06:02:08
【问题描述】：

我有以下包含这两个组件的待办事项应用程序：App 和 Todo

App.vue

<template>
  <div class="todo-list">
    <div :key="index" v-for="(todo, index) in state.todos">
      <Todo :todo="todo" :state="state" />
    </div>
  </div>
</template>

<script>
import { reactive } from '@vue/composition-api';
import Todo from './components/Todo.vue';

export default {
  components: {
    Todo
  },
  setup() {
    let state = reactive({
      todos: [
        { text: 'Learn about Vue', isCompleted: false },
        { text: 'Meet friend for lunch', isCompleted: false },
        { text: 'Build really cool todo app', isCompleted: false }
      ]
    });

    return { state };
  }
};
</script>

Todo.vue

<template>
  <div class="todo">{{ todo.text }}<button @click="deleteTodo">x</button></div>
</template>

<script>
export default {
  props: ['todo', 'state'],
  setup({ todo, state }) {
    const deleteTodo = () => {
      state.todos = state.todos.filter(t => t != todo);
    };

    return {
      deleteTodo
    };
  }
};
</script>

deleteTodo 函数在 Todo.vue 组件中工作正常，但是，我想知道是否可以不传递 state 对象而是使用 ref() 之类的所以并通过todos...

所以在 App.vue

//...
    let todos = ref({[
        { text: 'Learn about Vue', isCompleted: false },
        { text: 'Meet friend for lunch', isCompleted: false },
        { text: 'Build really cool todo app', isCompleted: false }
      ]);
//...

代替：

//...
   let state = reactive({
      todos: [
        { text: 'Learn about Vue', isCompleted: false },
        { text: 'Meet friend for lunch', isCompleted: false },
        { text: 'Build really cool todo app', isCompleted: false }
      ]
    });
//...

但是，当我尝试这样做时……孩子无法过滤已删除的待办事项并重新分配给todos 变量。这不起作用。

有什么想法可以让它与ref一起工作吗？

【问题讨论】：

直接修改 props 是一种反模式。你应该避免这样做。 vuejs.org/v2/guide/components-props.html#One-Way-Data-Flow
这有帮助。应该提供这个作为答案。我会接受的。虽然为了他人的利益而有更多细节。具体来说，我使用来自子级的发出事件来处理父级中的状态变化。现在我可以在父母中使用ref()。

标签： vue.js vuejs3

【解决方案1】：

您以错误的方式使用 ref。 ref 表示与 numbers 和 string 等响应式原始值一起使用，而 reactive 表示用于响应式对象。

您也可以将数组与 ref 一起使用。但是您不应该将数组包装在一个对象中以在ref中使用

正确的说法是

let todos = ref([      
        { text: 'Learn about Vue', isCompleted: false },
        { text: 'Meet friend for lunch', isCompleted: false },
        { text: 'Build really cool todo app', isCompleted: false }
    ])

然后你可以像你一样过滤。只是现在你必须引用像todos.value 这样的数组。你已经在做state 变量了。

https://v3.vuejs.org/guide/reactivity-fundamentals.html#declaring-reactive-state

【讨论】：