How to use Vue to implement component communication?

How to use Vue to implement component communication?

Vue is a popular JavaScript framework for building user interfaces. In Vue, components are the basic units for building web applications. And communication between components is critical to building complex applications. This article will introduce how to use Vue to implement communication between components and provide some code examples.

1. Parent component communicates with child components
Communication between parent component and child component is the most common scenario. Vue provides props attributes to implement this communication. In the parent component, data can be passed to the child component through props, and the child component can directly use the data in the props.

The following is a simple example of a parent component communicating to a child component:

Parent component

<template>
  <div>
    <h1 id="父组件">父组件</h1>
    <ChildComponent :message="message"></ChildComponent>
  </div>
</template>

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

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

Child component

<template>
  <div>
    <h2 id="子组件">子组件</h2>
    <p>{{ message }}</p>
  </div>
</template>

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

In the above example, the parent A data message is defined in the component, and the data is passed to the sub-component through the props attribute. Use props in the child component to receive the data passed by the parent component and render it in the template.

2. Communication from child components to parent components
Communication from child components to parent components is relatively complicated. Vue provides the $emit method to implement communication between child components and parent components.

The following is a simple example of a child component communicating to a parent component:

Parent component

<template>
  <div>
    <h1 id="父组件">父组件</h1>
    <ChildComponent @message="handleMessage"></ChildComponent>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleMessage(message) {
      console.log(message);
    }
  }
};
</script>

Child component

<template>
  <div>
    <h2 id="子组件">子组件</h2>
    <button @click="sendMessage">发送消息</button>
  </div>
</template>

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

In the above example, the child The message event is triggered in the component by using the $emit method, and the data Hello World! is passed to the parent component. The parent component uses @message to listen to the message event and handles the event in the handleMessage method.

3. Non-parent-child component communication
If you need to communicate between non-parent-child components, you can use the event bus mechanism provided by Vue. You can create an event bus instance and then communicate between components through this instance.

The following is an example of using event bus to implement non-parent-child component communication:

Event Bus

// eventBus.js
import Vue from 'vue';

const EventBus = new Vue();

export default EventBus;

Component A

<template>
  <div>
    <h2 id="组件A">组件A</h2>
    <button @click="sendMessage">发送消息</button>
  </div>
</template>

<script>
import EventBus from './eventBus.js';

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

Component B

<template>
  <div>
    <h2 id="组件B">组件B</h2>
    <p>{{ message }}</p>
  </div>
</template>

<script>
import EventBus from './eventBus.js';

export default {
  data() {
    return {
      message: ''
    };
  },
  created() {
    EventBus.$on('message', (message) => {
      this.message = message;
    });
  }
};
</script>

In the above example, an event bus instance EventBus is created, and then the message event is triggered in component A and the data Hello World! is passed to the event bus Example. Component B listens to the message event when it is created and updates the data after receiving the event.

Summary:
The above is a brief introduction on how to use Vue to implement component communication. In Vue, parent components can communicate with child components through props attributes, child components can communicate with parent components through the $emit method, and non-parent and child components can communicate through the event bus mechanism. I hope this article will help you understand component communication in Vue.

The above is the detailed content of How to use Vue to implement component communication?. For more information, please follow other related articles on the PHP Chinese website!