An article briefly analyzing the custom events and global event bus of Vue components

This article will introduce you to the Vue component and introduce the custom events and global event bus of the Vue component. I hope it will be helpful to you!

1. Custom events

1. What are custom events

Custom events are a method of communication between components, applicable to child components -> parent components transmit data, etc.

2. Where to use

If App is the parent component and School is a child component, and School wants to transfer data to App, then it is necessary to bind a custom event to School in App (the callback of the event is in App), that is, the parent component A self-defined event must be bound in advance for the use of sub-components, so that the data communication between father and son can be completed.

It’s like Little A’s father working out of town, and then Little A misses his father, and then what? His father gave Little A a call in advance and told Little A to make this call if he missed me. Then Little A could communicate with his father after making the call. The call was a custom event of the parent component. callback, so the data can be passed to the parent component

3. Bind custom events

3.1 The first way, in the parent component in: b8e8fd49a03356013c03e37ee5f7dfdf or 54a7222cd415026de644c6ac75dab481

3.2 The second method , in the parent component:e1d445036f7d80b7d2547f492d0a7142mounted(){this . $refs. xxx. $on('shanyu' ,this. test)}

If you write a native event in a custom event, it will default to the custom event, so we use @xxx.native to solve this problem [Related recommendations: vuejs video tutorial、web front-end development】

First write a custom component in the parent component (if you want the custom event to be triggered only once, you can use once modifier, or $once method)

      // 在父组件内自定义个事件
    getMyStudent(name) {
      console.log("App收到学校名:", name);
      this.studentName = name;
    }
  },
  mounted() {
    this.$refs.student.$on("shanyu", this.getMyStudent);
  }

Find the subcomponent and trigger the shanyu event on the Student component instance

Trigger the custom event: this. $emit('shanyu',data)

    methods: {
        sendStudentName(){
            //触发Student组件实例身上的shanyu事件
            this.$emit('shanyu',this.name)
        }
    }

4. Unbind custom events

    unbind(){
        this.$off('shanyu')// 只适用于解绑1个事件
        this.$off(['shanyu','demo'])// 适用于解绑多个
        this.$off()// 适用于解绑全部
    }

Note: Pass this. $refs. xxx. When $on('shanyu', callback) binds a custom event, the callback must be configured in methods or use an arrow function, otherwise there will be problems with this pointing, causing Vue to report an error

2. Global event bus

1. What is the global event bus

A method of communication between components, suitable for any Communication between components. Like custom events but far more than custom events, it can realize communication between brothers

2. How to use

The main thing here is It involves three files, main.js and two brother components. First, find main.js, which is the file with vm, and then install the global event bus in the vue instance. Then why should it be placed in the beforeCreate hook? Because the characteristic of the beforeCreate statement cycle hook is that it is executed before the data is refreshed. $bus is the vm of the current application. Bus not only means bus but also bus.

new Vue({
  el: "#app",
  render: h => h(App),
  // 使用beforCreate这生命周期钩子来进行兄弟间的通信
  beforeCreate() {
    Vue.prototype.$bus = this // 安装全局事件总线
  }
})

3. Using event bus

1. Receive data

If component A wants to receive data, bind a custom event to $bus in component A , the event callback remains in the A component itself. methods(){mounted() {this . $bus . $on( 'xxxx' ,this . demo)}

3f1c4e4b6b16bbbd69b2ee476dc4f83a
export default {
  name: "School",
  data() {
    return {
      name: "山鱼特效屋",
      address: "南京北城区"
    };
  },
  mounted() {
    this.$bus.$on('shanyu', (data) => {
      console.log("我是School组件，我收到了数据", data);
    });
  },
  //使用完之后销毁该绑定事件避免后期错误使用
  beforeDestroy() {
    this.$bus.$off("hello")
  },
}
2cacc6d41bbb37262a98f745aa00fbf0

2. Provide data

this. $bus.$emit('xxxx', transmit data)

d477f9ce7bf77f53fbcf36bec1b69b7a
  1b036e027ab888e5acdaae6ac491e863
    c1a436a314ed609750bd7c7d319db4da学生姓名：{{name}}2e9b454fa8428549ca2e64dfac4625cd
    c1a436a314ed609750bd7c7d319db4da学生性别：{{sex}}2e9b454fa8428549ca2e64dfac4625cd
    5c8a0c1f170e64ce29befb688e7617d4点击将数据给兄弟School65281c5ac262bf6d81768915a4a77ac0
  16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2

3f1c4e4b6b16bbbd69b2ee476dc4f83a
export default {
  name: "Student",
  data() {
    return {
      name: "张三",
      sex: "男"
    };
  },
  // 配置一个methods项
  methods: {
      snedStudentName(){
      // 选择给谁提供数据
          this.$bus.$emit('shanyu',this.name)
      }
  },
}
2cacc6d41bbb37262a98f745aa00fbf0

Note: It is best to use $off in the beforeDestroy hook to unbind the events used by the current component.

(Learning video sharing: vuejs introductory tutorial, Basic programming video)

The above is the detailed content of An article briefly analyzing the custom events and global event bus of Vue components. For more information, please follow other related articles on the PHP Chinese website!