无法通过事件总线(Vue.js)调用的方法发出事件

时间:2019-12-28 14:40:47

标签: vue.js event-bus emit

我有一个“表”父组件,其中包含任意数量的“行”子组件,这些子组件本身都包含输入字段。从父组件提交整个表将从所有行收集数据并进行验证。

为此,父组件的“提交”按钮使用事件总线从每个行/子组件中执行名为 jobs: - job: Cypress_e2e_tests pool: vmImage: 'windows-latest' variables: npm_config_cache: C:\Users\VssAdministrator\AppData\Local\npm-cache steps: - task: NodeTool@0 inputs: versionSpec: '10.x' - task: CacheBeta@1 inputs: key: npm | $(Agent.OS) | package-lock.json path: $(npm_config_cache) restoreKeys: npm | $(Agent.OS) | package-lock.json displayName: Cache NPM packages - task: CacheBeta@1 inputs: key: 'cypress | $(Agent.OS) | package-lock.json' path: 'C:\Users\VssAdministrator\AppData\Local\Cypress' restoreKeys: 'cypress | $(Agent.OS) | package-lock.json' displayName: Cache cypress binary - script: npm cache verify displayName: 'NPM verify' - script: npm ci displayName: 'Install NPM dependencies' - script: npm run cy:verify displayName: 'Cypress verify' - script: | npx cypress run --browser chrome displayName: 'Run Cypress tests' workingDirectory: $(System.DefaultWorkingDirectory) - task: PublishPipelineArtifact@0 displayName: 'Publish Screenshots (Cypress)' condition: failed() inputs: artifactName: 'screenshots' targetPath: '$(Build.SourcesDirectory)/cypress/screenshots' - task: PublishPipelineArtifact@0 displayName: 'Publish Videos (Cypress)' condition: failed() inputs: artifactName: 'videos' targetPath: '$(Build.SourcesDirectory)/cypress/videos' - task: PublishTestResults@2 inputs: testResultsFormat: 'JUnit' testResultsFiles: '*.xml' failTaskOnFailedTests: true testRunTitle: 'Cypress Test Results' publishRunAttachments: true condition: succeededOrFailed() 的方法:

父母'提交按钮:

processRow()

然后,此方法必须将验证结果+表单数据发送回表/父组件。为此,我使用常规的methods: { parentTableSubmit () { EventBus.$emit('processRow'); } }

行/子组件:

$emit

表/父组件侦听mounted () { EventBus.$on('processRow', this.processRow); }, methods: { processRow () { // validation code ... this.$emit("rowData", data); } } 事件,因为它以这种方式调用子/行组件:

rowData

这是相应的父级方法:

<div
  v-for="(row, i) in rows"
  :key="i"
  @rowData="getRowData"
>

好吧,methods: { getRowData (data) { console.log('data from row:') console.log(data) } } 永远不会被执行。

“父”提交按钮从所有子组件内部成功执行getRowData()方法。但是它们无法从父组件返回processRow()来执行。

为什么?我在这里做什么错了?

0 个答案:

没有答案