前端之家

  1. 首页
  2. 问答

通过在Vue.js中使用事件总线传递被单击元素的数据

• 问答

我对Vue.js还是很陌生，谢谢您的理解。我设置了一个Vue项目，在这里我要向患者显示患者及其数据。我想从一开始就告诉我我不打算使用Vuex：）

我的项目有3层。

我在其中导入数据的Home.vue文件（患者）

下一层是Patient.vue组件，其中有一个for循环并输出所有患者。在这种情况下，我将通过使用道具来获得耐心的数组。

最后一层称为ViewPatient.vue视图。我要在这里显示被点击的患者的更多详细信息。例如，我想继承名称以再次调用端点以检索患者的一些观察结果。例如：端点/患者/（theName）

我尝试了许多不同的方法：事件总线，动态路由器和数据访问。

Home.vue 

<template>
  <div class="container">
    <keep-alive>
      <Patients :PatientsData="PatientsData" />
    </keep-alive>
  </div>
</template>

<script>
// @ is an alias to /src
import PatientsData from "../data/messages";
import Patients from "../components/Patients.vue";

export default {
  name: "home",data() {
    return {
      PatientsData: PatientsData
    };
  },components: {
    Patients
  }
};
</script>

Patients.vue（组件）

<template>
  <div v-if="PatientsData.length > 0">
    <div class="row row-eq-height">
      <div v-for="PatientData in PatientsData" class="col-12 col-sm-6 col-md-3 mb-3" :key="PatientData.content" :data-id="PatientData.content" @click.prevent="passpatientData" >
        <router-link to="/patient" >
          <div class="col-12 patientsTiles p-4">
            <p class="patientsname">
              <span>Navn</span>
              {{ PatientData.content }}
            </p>
            <p class="patientsCPR">
              <span>CPR.nr</span>
              {{ PatientData.subject }}
            </p>
            <p class="patientsAge">
              <span>Alder</span>
              {{PatientData.age}}
            </p>
            <i :class="['fa','fa-star',{important: PatientData.isImportant}]"></i>
          </div>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
import router from "../main";
import { eventBus } from "../main";
export default {
  props: {
    PatientsData: Array,},data(){
    return{
      patientName: ""
    }
  },methods: {
    passpatientData() {
      this.patientName = this.PatientData;
      alert(this.patientName);

      eventBus.$emit("passpatientData",this.patientName);
    }
  }

};
</script>

ViewPatient.vue（视图）

<template>
  <div class="container">
    <h1>The Patient detail</h1>
  </div>
</template>

<script>
// @ is an alias to /src
import { eventBus } from "../main";

export default {
  props: {
    // patientId:{
    //     type: String
    // } 
  },data() {
    return {
      selectedPatient : ""
    };
  },created() {  
      eventBus.$on("passpatientData",data  => {  
        this.selectedPatient = data;
        // console.log("yeaah");

 })}
}
</script>

IMO，问题出在passpatientData函数上。 this.PatientData为空，我不知道如何将单击的元素的数据传递给空字符串（this。PatientName），因此我可以将其发送到事件总线

passpatientData() {
      this.patientName = this.PatientData;
      alert(this.patientName);

      eventBus.$emit("passpatientData",this.patientName);
    }
SCORPIOYUKI 回答：通过在Vue.js中使用事件总线传递被单击元素的数据

您已决定不使用Vuex。这并不意味着您不应该使用商店。最简单的存储只是根Vue数据中的一个对象，该对象通过Provide / Inject传递。将共享数据放在这里。

这比事件总线要简单得多。您可以从Vue组件中获得共享状态，并且由于它只是一个对象，除了存储状态外什么也不做，因此您将可以更好地控制拥有的内容及其工作方式。

// Home.vue
export default {
    name: "home",provide: { mySharedData: this.mySharedData },data() {
        return {
            mySharedData: {
                patientData: {}
            }
        };
    },created() {
        fetch("http://patientData")
            .then(response.json)
            .then((patientData) => this.mySharedData.patientData = patientData)
    }
    ...

// Then,in all other components of your app...
export default {
        inject: ['mysharedData'],...
    }

这样，您将充分利用Vue反应性来传播您的更改。您需要了解Vue如何使属性具有反应性。特别是，您不能只在mySharedData中分配新道具。最简单的方法是确保所有道具都在那里开始。要即时进行，use Vue.set()。

,

这是对我有用的方法（很少有变化）：

@bbsimonbb，谢谢您的回答，但是我不打算使用这种方法，因为与我的小任务相比，它有些过分。

在循环患者时，在Patient.vue中，我修改了click事件： 我实际上传递了被单击的单个元素，这解决了很多时间。

<div v-for="PatientData in storedPatients" class="col-12 col-sm-6 col-md-3 mb-3" :data-id="PatientData.content" @click="passPatientData(PatientData)" >

之前：

  @click="passPatientData"

之后：

@click="passPatientData(PatientData)"

然后在我的事件总线中，我无法“处理”正在传递的数据：

methods: {
    passPatientData(element) {
      this.patientName = element.content;
      alert(this.patientName);

      eventBus.$emit("passPatientData",this.patientName);
    }
  }

目的是通过使用eventbus将PatientName传递到ViewPatient.vue文件，并调用一个新的端点，如下所示：Endpoint / Patient /（PatientName）。然后，终点的结果将是在患者中单击的单个患者的详细信息。vue

正在工作。希望它对其他正在解决同一问题的人有用。

javascriptvue-componentvue-routervue.js
本文链接：https://www.f2er.com/3163612.html

大家都在问