Shulou(Shulou.com)06/01 Report--

This article mainly shows you "what is the Vue global event bus", which is easy to understand and well organized. I hope it can help you solve your doubts. Let the editor lead you to study and learn this article "what is the Vue global event bus?"

Global event bus is a way of communication between components, which is suitable for communication between any components.

Take a look at the specific examples below.

Parent component: App

Import Company from ". / components/Company.vue"; import Employee from ". / components/Employee.vue"; export default {components: {Company, Employee}} .app {background: gray; padding: 5px;} .btn {margin-left:10px; line-height: 30px; background: ivory; border-radius: 5px;}

Sub-components: Company and Employee

Company name: {{name}} Company address: {{address}} I send export default {name: "Company", data () {return {name: "Wuha Technology Co., Ltd.", address: "Shanghai Baoshan"}}, methods: {sendMessage () {console.log ("Company component sends data:" This.name) This.$bus.$emit ("demo", this.name);} .company {background: orange; background-clip: content-box; padding: 10px } employee name: {{name}} employee Age: {{age}} export default {name: "Employee", data () {return {name: "Zhang San", age:25}}, mounted () {this.$bus.$on ("demo", (data) = > {console.log ("Employee component listens for demo") Receive data: ", data) })}, beforeDestroy () {this.$bus.$off ("demo");} .employee {background: skyblue; background-clip: content-box; padding: 10px;}

Entry file: main.js

Import Vue from 'vue'; import App from'. / App.vue';Vue.config.productionTip = false;new Vue ({el: "# app", render: h = > h (App), beforeCreate () {Vue.prototype.$bus = this;}})

Parent components App, child components Company and Employee

Data is transferred between the subcomponents Company and Employee through the global data bus.

In main.js, the global event bus is defined: $bus.

$bus is defined in Vue.prototype, so $bus is visible to all components, that is, all components are accessible through this.$bus.

$bus is assigned to this, or vm instance, so $bus has all the properties and methods on the vm instance, such as $emit, $on, $off, and so on.

New Vue ({beforeCreate () {Vue.prototype.$bus = this;}})

Use the global event bus

$bus.$on, listening for events. Listening events are defined in the Employee component, listening for demo events

$bus.$emit, trigger the event. A trigger event is defined in the Company component. Click the button to execute the sendMessage callback, which triggers the demo event.

These are all the contents of the article "what is the Vue global event bus?" Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.