Vue.js - 当子组件在 <transition> 内时无法访问 this.$parent 父组件Wall.vue子组件PostItem.vue

问题描述

我想要的：我有两个组件，父组件（Wall.vue）和子组件（PostItem.vue）。每个PostItem都有一个删除按钮。单击时，会向我的 API 发送请求，并从数据库中删除该项目。然后我想调用父组件的getPosts函数再次获取所有帖子（这次没有删除帖子）。

问题：在子组件内部，我无法访问 this.$parent 对象（或者更具体地说，它只是空的，不包含函数），所以我可以不调用 getPosts 函数。当我删除也围绕子组件的父组件中的 <transition-group> 时，一切正常。

这里有什么问题？

父组件（Wall.vue）

模板部分：

<template>
  <div class="Wall view">  
      <transition-group name="wallstate">
        <template v-else-if="messages">
          <PostItem
            v-for="(message,index) in messages"
            :key="index"
            :message="message"
            :index="index"
            class="PostItem"
          />
        </template>
        <h1 v-else>
          Could not load messages. Please try later.
        </h1>
      </transition-group>
  </div>
</template>

脚本部分：

<script>
import { mapGetters } from 'vuex';
import { postsAPI } from '../services/posts.service.js';

import PostItem from '../components/PostItem.vue';

export default {
  components: {
    PostItem,},data() {
    return {
      messages: null,};
  },methods: {
    getPosts() {
      ///////Do stuff
    }
  }
};
</script>

子组件（PostItem.vue）

模板部分

<template>
  <div class="PostItem__message frosted">
    <p class="PostItem__messageContent">{{ message.content }}</p>
    <p>
      by: <strong>{{ message.user.username }}</strong>
    </p>
    <a
      @click="deletePost"
      :data-id="message._id"
      v-if="message.user._id === user.id"
    >
      Delete
    </a>
  </div>
</template>

脚本部分：

<script>
import { postsAPI } from '../services/posts.service.js';
import { mapGetters } from 'vuex';

export default {
  name: 'PostItem',props: {
    message: {
      type: Object,required: true,index: {
      type: Number,computed: {
    ...mapGetters({
      user: 'auth/user',}),methods: {
    deletePost(e) {
      const id = e.target.dataset.id;
      postsAPI.removeOne(id).then((res) => {
        this.$parent.getPosts();  <-------- PROBLEM HERE
      });
    },};
</script>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）