Vue.js event bus technique is sometime useful.
// ModalEvent.js
import Vue from "vue"
export const ModalEvent = new Vue()
<script>
import Vue from "vue"
import VModal from "vue-js-modal"
import { ModalEvent } from "./ModalEvent"
Vue.use(VModal)
export default {
created(){
ModalEvent.$on("openModal", () => {
this.$modal.show("hello-modal")
})
}
}
</script>
<!-- event trigger component -->
<script>
import { ModalEvent } from "./ModalEvent"
export default {
methods:{
onClick(){
ModalEvent.$emit("openModal")
}
}
}
</script>
But it have tiny problem that Event.$on and Event.$emit 's event signature is string, and it's can easily mistake.
Solution
I found it's can solve with use Event.methods.
// ModalEvent.js
import Vue from "vue"
const OPEN_MODAL = "openModal"
export const ModalEvent = new Vue({
methods: {
emitOpenModal(event){
this.$emit(OPEN_MODAL, event)
},
onOpenModal(cb){
this.$on(OPEN_MODAL, cb)
}
}
})
<script>
import Vue from "vue"
import VModal from "vue-js-modal"
import { ModalEvent } from "./ModalEvent"
Vue.use(VModal)
export default {
created(){
ModalEvent.onOpenModal( () => {
this.$modal.show("hello-modal")
})
}
}
</script>
<script>
import { ModalEvent } from "./ModalEvent"
export default {
methods:{
onClick(){
ModalEvent.emitOpenModal()
}
}
}
</script>
Top comments (4)
Hello, Terrierscript.
could you please guide me to test this modal vuejs component with JEST ?
import Vue from 'vue'
import { TeamMember } from '@/components/TeamMember.vue'
import { mount } from "@vue/test-utils"
describe('TeamMember.vue', ()=>{
it('renders a link', () => {
const wrapper = mount(TeamMember)
expect(wrapper.text(true)).toEqual(true)
})
})
Sorry for late ( I missed this comment.)
Hmm, this solution is un-test friendly ( I noticed this now )
If I need test this, I mocked
ModalEvent.use with jestjs.io/docs/en/manual-mocks#moc... or sinonjs.org/
cool! I find Redux/Vuex really confusing, but this EventBus method looks like a simpler solution.
You can even use this technique while still making use of Vuex.
I like it the most when I want to avoid storing extra stuff in state, like having some vue instance commit a flag, that another vue instance is watching. That would be like a vue1 -> state -> vue2 pathway.
I can instead just use the EventBus as like a side passage, just emit from 1 vue component and listen to it in the other one so I'm instead going vue1 -> EventBus -> vue2.