Javascript 将对象从一个组件发送到另一个组件

我有一个组件，可以显示您的所有任务，当您单击一个任务时，我希望用户被发送到一个名为

task

的组件，然后该组件将与用户单击的任务一起呈现

我已经尝试将

$emit

从

课程

组件使用到

应用程序

，然后呈现任务组件，但这会导致

任务.vue

组件始终呈现在

路由器视图

中

所有数据都来自firebase数据库。 虽然我没有包括它，但所有组件都在

data（）中声明了变量

课程
部分：

    <b-list-group class="listGroup" v-for="course in courses" v-bind:key="course.id">
      <b-button
        class="headline"
        disabled
        block
        variant="dark"
        style="opacity: 1"
        v-if="course.title"
      >{{course.title}}</b-button>
      <b-list-group-item variant="dark" class="clickableList" v-if="course.modul">{{course.modul}}</b-list-group-item>
      <b-list-group-item
        variant="dark"
        class="clickableList"
        @click="get(course.task6)"
        v-if="course.task6"
      >{{course.task6.name}}</b-list-group-item>
    </b-list-group>

  methods: {
    get(variable) {
      this.selectedTask = variable;
      this.$router.push('Task');
      this.$emit("task", this.selectedTask);

    }
  }

<template>

      <b-button
        class="headline"
        disabled
        block
        variant="dark"
        style="opacity: 1"
        v-if="task.name"
        :item="task"
        :key="task.id"
      >{{task.name}}</b-button>


<script>
import firebase from "firebase";

export default {
  name: "Task",
  props: {
    parentData: {
      type: Object
    }
  },
  watch: {
    parentData: function() {
      if (this.$router.currentRoute.name == "Task") {
        this.task = this.parentData;
      }
    }
  }
};


任务
组件：

    <b-list-group class="listGroup" v-for="course in courses" v-bind:key="course.id">
      <b-button
        class="headline"
        disabled
        block
        variant="dark"
        style="opacity: 1"
        v-if="course.title"
      >{{course.title}}</b-button>
      <b-list-group-item variant="dark" class="clickableList" v-if="course.modul">{{course.modul}}</b-list-group-item>
      <b-list-group-item
        variant="dark"
        class="clickableList"
        @click="get(course.task6)"
        v-if="course.task6"
      >{{course.task6.name}}</b-list-group-item>
    </b-list-group>

  methods: {
    get(variable) {
      this.selectedTask = variable;
      this.$router.push('Task');
      this.$emit("task", this.selectedTask);

    }
  }

<template>

      <b-button
        class="headline"
        disabled
        block
        variant="dark"
        style="opacity: 1"
        v-if="task.name"
        :item="task"
        :key="task.id"
      >{{task.name}}</b-button>


<script>
import firebase from "firebase";

export default {
  name: "Task",
  props: {
    parentData: {
      type: Object
    }
  },
  watch: {
    parentData: function() {
      if (this.$router.currentRoute.name == "Task") {
        this.task = this.parentData;
      }
    }
  }
};



{{task.name}
从“firebase”导入firebase；
导出默认值{
名称：“任务”，
道具：{
父数据：{
类型：对象
}
},
观察：{
parentData:function（）{
if（此.$router.currentRoute.name==“任务”）{
this.task=this.parentData；
}
}
}
};

当前代码有效。单击任务时，您将被发送到
task.vue
组件，代码将被渲染出来，但离开视图时代码不会消失

必须有更好的方法来做到这一点。
我想这就是您要寻找的地方：我已经看过vuex，但我不确定这对这个项目来说是否有点过分。该项目总共将有大约200个任务，大约50人将有权访问。另一件事是，您可以通过路由将任务作为参数推送，或者推送id，然后在任务组件中检索任务。我不认为vuex是杀伤力过大。btwI届时将查看vuex。