我有一个“表”父组件,其中包含任意数量的“行”子组件,这些子组件本身都包含输入字段。从父组件提交整个表将从所有行收集数据并进行验证。
为此,父组件的“提交”按钮使用事件总线从每个行/子组件中执行名为 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()
来执行。
为什么?我在这里做什么错了?