How to communicate between vue brother components? Detailed explanation of method

Vue.js is a progressive JavaScript framework whose responsive system and component-based architecture make it increasingly popular in web development. Recently, many developers have encountered communication problems between sibling components when using Vue.js. This article will introduce how to use the sibling component method of Vue.js to solve this problem.

In Vue.js, sibling components refer to components at the same level, and there is no parent-child relationship between them. When communicating between sibling components, they cannot directly access and modify each other's data and methods. However, Vue.js provides a way to achieve communication between sibling components, which is to use the event mechanism of Vue.js.

First, let’s take a look at how to use events between sibling components:

• Define a method in sibling component A to trigger events and pass data

methods: {
  emitData() {
    this.$emit('some-event', this.someData);
  }
}

• In sibling component B, use v-on to listen to the event of the same name and process the passed data in the component's method

<template>
  <div>
    ...
  </div>
</template>

<script>
export default {
  methods: {
    handleData(someData) {
      // 处理传递过来的数据
    }
  },
  mounted() {
    this.$on('some-event', this.handleData);
  }
}
</script>

In the above example, the emitData method in sibling component A triggers the some-event event and passes a parameter someData. In sibling component B, use the mounted hook function to listen to the event of the same name some-event, and process the passed data in the method handleData.

This method can be used for communication between two sibling components. This approach becomes less practical if the number of sibling components increases. To solve this problem, we can use Vue.js’s provide/inject mechanism.

provide and inject are two Vue.js instance methods. When a component provides data using provide, all of its child components can access that data using inject. Using provide/inject allows us to share data or methods between multiple sibling components.

The following is an example of using provide/inject to implement communication between sibling components:

// 父组件
export default {
  provide: {
    getSomeData: this.getData
  },
  data() {
    return {
      someData: 'some data'
    }
  },
  methods: {
    getData() {
      return this.someData;
    }
  }
}

// 子组件1
export default {
  inject: ['getSomeData'],
  methods: {
    handleData() {
      const data = this.getSomeData();
      // 处理 data
    }
  }
}

// 子组件2
export default {
  inject: ['getSomeData'],
  methods: {
    handleChange() {
      const data = this.getSomeData();
      // 处理 data
    }
  }
}

In the above code, the parent component uses provide Provides a method getData for returning data someData. Use inject to inject this method in the child component, and then use this method in the child component's method to achieve communication between sibling components.

Summary

In Vue.js, using the sibling component method can solve the problem of communication between sibling components. Specifically, we can use the event mechanism of Vue.js to implement communication between sibling components, or we can use the provide/inject mechanism to allow multiple sibling components to share data and methods. Mastering these technologies can make us more flexible and efficient in Vue.js development.

The above is the detailed content of How to communicate between vue brother components? Detailed explanation of method. For more information, please follow other related articles on the PHP Chinese website!