Javascript 在子组件中更新道具后，如何调用函数。Vue3合成API

我有一个todo列表，它是从for循环生成的。每个

todo

都作为道具传递给

子组件。从

组件中删除

todo

后，如何刷新页面（意思是：调用

gettoos

函数）。使用

onUpdated

生命周期钩子是可行的，但问题是一旦我删除了一个

todo

，RESTAPI就会有一个不可阻挡的GET循环。有什么想法吗

列出组件

<template>
  <div>
    <CreateTodo />
    <hr />

    <div class="TodoContainer">
      <SingleTodo
        v-for="todo in todos"
        v-bind:key="todo.id"
        :todo="todo"
        class="TodoComponent"
      />
    </div>
    <hr />
  </div>
</template>

<script>
import CreateTodo from "./CreateTodo";
import SingleTodo from "./SingleTodo";
import { onMounted, ref } from "vue";

//
export default {
  components: {
    CreateTodo,
    SingleTodo,
  },

  props: {
    todo: Object,
  },

  setup() {
    const API_URL = "http://127.0.0.1:8000/api/todo-list/";
    const todos = ref([]);

    async function getTodos() {
      const response = await fetch(API_URL);
      const json = await response.json();
      todos.value = json;
    }


    onMounted(() => {
      getTodos();
    });

    // onUpdated(() => {
    //   getTodos();
    // });

    return {
      todos,
      getTodos,
    };
  },
};
</script>

从“/CreateTodo”导入CreateTodo；
从“/SingleTodo”导入SingleTodo；
从“vue”导入{onMounted，ref}；
//
导出默认值{
组成部分：{
创建Todo，
单打，
},
道具：{
todo:对象，
},
设置（）{
常量API_URL=”http://127.0.0.1:8000/api/todo-列表/“；
常数todos=ref（[]）；
异步函数getTodos（）{
const response=wait fetch（API_URL）；
const json=await response.json（）；
todos.value=json；
}
未安装（（）=>{
getTodos（）；
});
//未更新（（）=>{
//getTodos（）；
// });
返回{
待办事项，
盖托多斯，
};
},
};

子组件，SingleTodo.vue

<template>
  <div>
    {{ todo.id }}{{ todo.completion }}{{ todo.todo }}
    <button @click="removeTodo(todo.id)">delete</button>
  </div>
</template>

<script>
// import { getTodos } from "./TodoHooks.js";
import { getCookie } from "./TodoHooks.js";

export default {
  props: {
    todo: Object,
  },

  setup() {
    const API_DELETE = "http://127.0.0.1:8000/api/todo-delete";
    const csrftoken = getCookie("csrftoken");

    //

    async function removeTodo(id) {
      var csrftoken = getCookie("csrftoken");
      fetch(`${API_DELETE}/${id}/`, {
        method: "DELETE",
        headers: {
          "Content-type": "application/json",
          "X-CSRFToken": csrftoken,
        },
      }).then((response) => {
        // NEEDED TO UPDATE AUTOMATICALLY.
        // getTodos();
        return response;
      });
    }

    return {
      removeTodo,
      csrftoken,
    };
  },
};
</script>

{{todo.id}{{todo.completion}{{todo.todo}}
删除
//从“/TodoHooks.js”导入{getTodos}；
从“/TodoHooks.js”导入{getCookie}；
导出默认值{
道具：{
todo:对象，
},
设置（）{
常量API_DELETE=”http://127.0.0.1:8000/api/todo-删除”；
const csrftoken=getCookie（“csrftoken”）；
//
异步函数removeTodo（id）{
var csrftoken=getCookie（“csrftoken”）；
fetch（`${API\u DELETE}/${id}/`{
方法：“删除”，
标题：{
“内容类型”：“应用程序/json”，
“X-CSRFToken”：CSRFToken，
},
})。然后（（响应）=>{
//需要自动更新。
//getTodos（）；
返回响应；
});
}
返回{
removeTodo，
csrftoken，
};
},
};

尝试向父组件发出事件以刷新列表，添加

emits

选项，如：

props: {
    todo: Object,
  },
  emits:['refresh'],
....

然后在

然后

回调中发出

刷新

事件：

 }).then((response) => {
        emit('refresh')

但是在您应该从设置参数

setup（{emit}）{

完整代码：

<script>
// import { getTodos } from "./TodoHooks.js";
import { getCookie } from "./TodoHooks.js";

export default {
  props: {
    todo: Object,
  },
  emits:['refresh'],
  setup(_,{emit}) {
    const API_DELETE = "http://127.0.0.1:8000/api/todo-delete";
    const csrftoken = getCookie("csrftoken");

    //

    async function removeTodo(id) {
      var csrftoken = getCookie("csrftoken");
      fetch(`${API_DELETE}/${id}/`, {
        method: "DELETE",
        headers: {
          "Content-type": "application/json",
          "X-CSRFToken": csrftoken,
        },
      }).then((response) => {
        emit('refresh')
        return response;
      });
    }

    return {
      removeTodo,
      csrftoken,
    };
  },
};
</script>

//从“/TodoHooks.js”导入{getTodos}；
从“/TodoHooks.js”导入{getCookie}；
导出默认值{
道具：{
todo:对象，
},
发射：[“刷新”]，
设置（{emit}）{
常量API_DELETE=”http://127.0.0.1:8000/api/todo-删除”；
const csrftoken=getCookie（“csrftoken”）；
//
异步函数removeTodo（id）{
var csrftoken=getCookie（“csrftoken”）；
fetch（`${API\u DELETE}/${id}/`{
方法：“删除”，
标题：{
“内容类型”：“应用程序/json”，
“X-CSRFToken”：CSRFToken，
},
})。然后（（响应）=>{
发出（'刷新'）
返回响应；
});
}
返回{
removeTodo，
csrftoken，
};
},
};

在父组件中：

 <SingleTodo
        v-for="todo in todos"
        v-bind:key="todo.id"
        :todo="todo"
        class="TodoComponent"
        @refresh="getTodos"

      />