Detailed explanation of component communication technology in Vue

Vue is one of the most popular front-end frameworks today. It provides us with a very powerful component-based development method that can greatly improve our development efficiency. In the component-based development of Vue, communication processing between components is very important. This article will provide a detailed introduction to component communication technology in Vue.

1. Parent component passes data to child component

In Vue, parent component passes data to child component using props attribute. Receive the data passed by the parent component through the props attribute in the child component.

Parent component code:

<template>
  <div>
    <child-component :msg="msg"></child-component>
  </div>
</template>

<script>
  import ChildComponent from './ChildComponent.vue'

  export default {
    components: {
      ChildComponent
    },
    data() {
      return {
        msg: 'Hello World!'
      }
    }
  }
</script>

Child component code:

<template>
  <div>{{ msg }}</div>
</template>

<script>
  export default {
    props: {
      msg: {
        type: String,
        required: true
      }
    }
  }
</script>

Here data is passed by using the child component tag in the parent component, and the child component uses the props attribute to receive the parent The data passed by the component completes the data transfer.

2. Subcomponent passes data to parent component

Subcomponent passes data to parent component using custom events and the $emit method.

Subcomponent code:

<template>
  <div>
    <button @click="sendMessage">发送消息</button>
  </div>
</template>

<script>
  export default {
    methods: {
      sendMessage() {
        this.$emit('send-message', 'Hello Parent!')
      }
    }
  }
</script>

Here by defining a method, use the $emit method to pass custom events and the data that needs to be passed.

Parent component code:

<template>
  <div>
    <child-component @send-message="receiveMessage"></child-component>
    <div>{{ message }}</div>
  </div>
</template>

<script>
  import ChildComponent from './ChildComponent.vue'

  export default {
    components: {
      ChildComponent
    },
    data() {
      return {
        message: ''
      }
    },
    methods: {
      receiveMessage(msg) {
        this.message = msg
      }
    }
  }
</script>

Here, use the subcomponent tag in the parent component to listen to the custom events sent by the subcomponent, and use the receiveMessage method to receive the message passed by the subcomponent.

3. Communication between sibling components

In the communication between sibling components, because they have no parent-child relationship, props and $emit cannot be used directly like communication between parent-child components. To communicate with methods, you need to use another communication method in Vue: the event bus.

The event bus is a custom Vue instance used for communication between sibling components. In one component, we can use the $emit method to send custom events to the event bus, and another component can listen and receive events through the $on method.

Event bus code:

import Vue from 'vue'
export default new Vue();

Here an event bus is created through a separate file.

Component A code:

<template>
  <div>
    <button @click="sendMessage">发送消息</button>
  </div>
</template>

<script>
  import EventBus from '../utils/eventBus'

  export default {
    methods: {
      sendMessage() {
        EventBus.$emit('send-message', 'Hello B!')
      }
    }
  }
</script>

Here to send messages in component A, use the EventBus.$emit method to send custom events to the event bus.

Component B code:

<template>
  <div>{{ message }}</div>
</template>

<script>
  import EventBus from '../utils/eventBus'

  export default {
    data() {
      return {
        message: ''
      }
    },
    mounted() {
      EventBus.$on('send-message', msg => {
        this.message = msg
      })
    }
  }
</script>

Here, listen to the event bus in component B and use the EventBus.$on method to receive messages sent by component A.

4. Cross-level component communication

In cross-level component communication, we can use the provide/inject method provided in Vue. The provide/inject methods can pass data to descendant components at any level.

The provide method will provide a data object to the descendant component, and the inject method will inject this data object into the descendant component.

Parent component code:

<template>
  <div>
    <child-component></child-component>
  </div>
</template>

<script>
  import ChildComponent from './ChildComponent.vue'

  export default {
    components: {
      ChildComponent
    },
    provide() {
      return {
        message: 'Hello World!'
      }
    }
  }
</script>

Here, the provide method is used in the parent component to provide a data object message internally.

Child component code:

<template>
  <div>{{ value }}</div>
</template>

<script>
  export default {
    inject: ['message'],
    computed: {
      value() {
        return this.message
      }
    }
  }
</script>

Here, use the inject method in the child component to inject the data object provided by the parent component, and then use this data object.

Summary

The above is a detailed introduction to component communication in Vue. When we need to interact with data between components during the development process, the above technologies can solve this problem very well. We need to choose the most appropriate way to implement communication between components according to the specific situation to achieve the optimal development effect.

The above is the detailed content of Detailed explanation of component communication technology in Vue. For more information, please follow other related articles on the PHP Chinese website!