我希望使用全局事件总线,将子组件中的事件发送到(祖先)父组件。
在我的 main.js 文件中,我将全局事件总线提供给所有组件使用。
在我的 main.js 文件中,我将全局事件总线提供给所有组件使用。
import Vue from 'vue'
import App from './App'
const eventHub = new Vue()
new Vue({
el: '#app',
template: '<App/>',
components: { App }
})
Vue.mixin({
data: function () {
return {
eventHub: eventHub
}
}
})
然后,在我的 Childcomponent.vue: 中,我在点击事件上向事件总线发送一个事件
<template>
<button @click="save">Save</button>
</template>
<script>
let data = {
columnName: '',
order: 0
}
export default {
...
name: 'init-column',
methods: {
save: function () {
this.eventHub.$emit('newColumn', data)
}
}
...
}
</script>
然后,在一个名为Parentcomponent.vue的组件中,我想要捕获这个事件并对子组件传递的数据进行处理:
<template>
<div id="app">
<column v-for="column in allData"></column>
<init-column v-if="newColumn"></init-column>
</div>
</div>
</template>
<script>
import initColumn from './components/Init-column'
let newColumn = false
export default {
...
name: 'project',
ready: function () {
this.eventHub.$on('newColumn', (event) => {
console.log(event)
})
}
...
}
</script>
我不确定在哪里放置$on
监听器,我看到一些示例将$on
放在ready hook中。然而,上面的代码什么也没做,但是控制台没有错误。