我正在用 vue 构建一个表单框架。我有每个字段类型的组件。每个字段类型组件都使用 this.$emit 与父组件进行通信。
我可以使用 v-on 指令在父组件中触发事件,如下所示:
<template>
<div v-if="fieldsLoaded">
<form-select :field="fields.title" v-on:updated="validate" ></form-select>
<form-input :field="fields.first_name" v-on:updated="validate" ></form-input>
</div>
</template>
但是,我不想手动指定每个组件都应该单独触发 validate
方法。
如何让父组件监听其所有子组件发出的 updated
?
编辑:我正在寻找类似下面的东西,尽管 $on 只捕获发生在同一组件内的发射,而不是它的子组件
created: function(){
this.$on('updated',validate)
}
最佳答案
The best way is to use
event bus
or even better in my opinionvuex
.
第一个案例请看here
对于第二个here
使用事件总线
,您可以发出事件,并在需要时随时收听该事件(在父级、子级甚至在同一组件中)
Vuex 它作为应用程序中所有组件的集中存储
,您可以在该存储中拥有属性,并且可以使用和操作它们。
事件总线示例:
main.js:
import Vue from 'vue'
import App from './App.vue'
export const eventBus = new Vue();
new Vue({
el: '#app',
render: h => h(App)
})
用户组件
<template>
<button @click="clicked">Click me to create event</button>
</template>
<script>
import { eventBus } from './main'
export default {
name: 'User',
methods: {
clicked() {
eventBus.$emit('customEvent', 'a text to pass')
}
}
}
</script>
管理组件
<template>
<p>The message from event is: {{message}}</p>
</template>
<script>
import { eventBus } from './main'
export default {
name: 'Admin',
data: () => ({
message: ''
})
created() {
eventBus.$on('customEvent', dataPassed => {
this.message = dataPassed
}
}
}
</script>
查看this Vuex 教程
关于vue.js - 如何跨多个子 Vue 组件捕获事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41679333/