Question

我有一个向您显示所有任务的组件，当您单击一个任务时，我希望将用户发送到名为Task的组件，然后使用用户单击的任务进行渲染。

我已经尝试从$emit组件到course使用app，然后渲染任务组件，但这导致Task.vue组件始终被渲染在router-view中。

所有数据均来自Firebase数据库。虽然我没有将其包括在内，但所有组件都具有在data()

中声明的变量

Course组件：

    <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);

    }
  }

App.vue：

  <router-view @task="sendTask" />
      <div>
        <Task :parentData="childData" />
      </div>

  // Accepts data from course components
  methods: {
    sendTask(variable) {
      this.childData = variable;
    }

Task组件：

<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.vue组件，并且代码已呈现出来，但是当您离开视图时该代码不会消失。

必须有一种更好的方法。

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

0 个答案: