vue.js - 如何更改在 vue3 中作为 Prop 传递的原始值？

Question

假设您有一个todo-list 组件，它将为您呈现传递的todos。其中 todos 是一个 Ref 对象。

<todo-list :todos="todos"/>

todo-list 组件还允许用户删除任何传递的待办事项。

但是 vue3 不允许我们改变 props.todos 对象。

因此，唯一的方法是复制 props.todos，然后如果用户单击删除按钮，则从该克隆的项目中删除该项目以更新 View 。但是这种方法不会更改原始传递的 todos Ref 对象。

解决这个问题的另一种方法是从 todo-list 发出一个 itemDeleted 事件，从它的父组件中监听它，然后从原始传递的 todos 监听器中的 Ref 对象。

但我想将所有逻辑保留在 todo-list 本身中，所以我想知道是否有任何方法可以更改原始 todos Ref 对象在 todo-list 组件中。

我知道更好的解决方案可能是使用 v-model:todo-list，并发出一个 update:todo-list 事件来更新原始的 todo -list Ref 对象。但是我想知道如果没有 v-model 指令我是否可以做到这一点。

Answer 1

将 todos 放在名为 useTodo.js 的单独文件中，该文件定义了一个可组合函数，可以在多个组件之间重复使用，而无需使用任何内部属性或传递 props :

import {ref} from 'vue'
const todos=ref([])

const useTodo= () => {

 setTodos(_todos){
       todos.value=_todos;
  }

return {todos, setTodos}
}

export default useTodo

然后将其导入到两个父待办列表组件中

父组件:

<todo-list />
...
import useTodo from './useTodo'
...

setup(){
    const {todos, setTodos}=useTodo();
    //use todos instead of your todos with ref

}

在 todolist 组件中:

...
import useTodo from './useTodo'
...

setup(){
    const {todos, setTodos}=useTodo();
     //use todos instead of props.todos

}