Question

我有vue js应用程序，其中包含父组件和子组件。我在父组件上放置了一个“提交”按钮，它在子组件上调用了api调用。

请在父组件上找到我的源代码

  <button type="button" @click.prevent="buttonSubmitEvent">
            Submit
   </button>



 export default class EditModal extends Vue {
   private buttonSubmitEvent(): void {
   this.$router.app.$emit("saveEventTriggered");
    }
}

请在子组件上找到我的代码

export default class EditHighlights extends Vue {
  private mounted() {
    this.$router.app.$on('saveEventTriggered', (data: any) => {
    this.updateHighlights();
    return;
  });
  }

  private async updateHighlights() {
    alert('api call');
  }
}

还请找到测试文件的源代码

import { isExportDeclaration } from "typescript";
const mountVue = require("cypress-vue-unit-test");
import camelcaseKeys from 'camelcase-keys';
import Popup from "../../../../src/components/edit/EditComponent.vue";
import { iterator } from "rxjs/internal-compatibility";
const template = `<div>
  <Popup :componentName="EditHighLightsComponent" :heading="title"></Popup>
</div>`;
const data = () => ({title:"Edit HighLights ",EditHighLightsComponent:"EditHighLightsComponent",
highlightModel: [
    {
        "Id": "31",
        "TitileOne": "mmmm  m",
        "ContentOne": "Pssoas ",
        "TitleTwo": "Rlhões22",
        "ContentTwo": "Distrbasil22",
        "TitleThree": "Pa33",
        "ContentThree": "E ada22",
        "TitleFour": "No autos25",
        "ContentFour": "Nal225",
        },], 
      })
  const components = {  Popup};
  describe('Edit highlights component ',()=>{    
  beforeEach(mountVue({ template, components,data}))

  it('check the posted data with ui',()=>{
  mountVue({ template, components,data});  
  cy.get('#btnSubmitHighlights').click();
  });
  });

当用户单击父组件上的“提交”按钮时，应使用方法“ updateHighlights”。它可以在浏览器上运行，但不能在赛普拉斯上运行。谁能帮我解决这个问题？

当我们使用vue js $ emit和$ on

0 个答案: