Javascript Vue.js-当子组件位于内部时，无法访问此。$parent<；过渡>；

我想要什么：我有两个组件，父组件（Wall.vue）和子组件（positem.vue）。每个

positem

都有一个删除按钮。单击后，将发送对my API的请求，并从数据库中删除该项。然后我想调用父组件的

getPosts

函数再次获取所有帖子（这次没有删除的帖子）

问题：在子组件中，我无法访问

this.$parent

对象（或者更具体地说，它只是空的，不包含函数），因此我无法调用

getPosts

-函数。当我移除父组件中的

时，它也围绕着子组件，一切都正常

这里有什么问题

父组件（Wall.vue） 模板部分：

无法加载邮件。请稍后再试。

脚本部分：

从“vuex”导入{mapGetters}；
从“../services/posts.service.js”导入{postsAPI}；
从“../components/positem.vue”导入positem；
导出默认值{
组成部分：{
职位，
},
数据（）{
返回{
消息：空，
};
},
方法：{
getPosts（）{
///////做事
}
}
};

子组件（positem.vue） 模板部分

{{message.content}

发件人：{{message.user.username}

删除

脚本部分：

从“../services/posts.service.js”导入{postsAPI}；
从“vuex”导入{mapGetters}；
导出默认值{
名称：'PostItem'，
道具：{
信息：{
类型：对象，
要求：正确，
},
索引：{
类型：数字，
要求：正确，
},
},
计算：{
…地图绘制者({
用户：“auth/user”，
}),
},
方法：{
删除邮件（e）{
const id=e.target.dataset.id；
postsAPI.removeOne（id）.然后（（res）=>{
this.$parent.getPosts（）；通常认为使用
this.$parent
（它耦合组件并降低封装/代码的清晰度）是一种不好的做法。当子组件想要向祖先组件发送信息时，它应该发出一个事件

删除直接访问并
$emit
一个名为“已删除”的事件：

deletePost（e）{
const id=e.target.dataset.id；
postsAPI.removeOne（id）.然后（（res）=>{
这是。$emit（'deleted'）；//发出事件
});
},

父级应侦听该
已删除的
事件，并运行事件处理程序：



当被
@deleted
事件侦听器触发时，父级将调用
getPosts
方法