Changes in Vue3 compared to Vue2: more flexible communication between components

Changes in Vue3 compared to Vue2: More flexible communication between components

In front-end development, components are the basic modules for building a complex application. In the Vue framework, communication between components has always been an important topic. In the traditional Vue2 version, communication between components is mainly achieved through props and events. However, as the complexity of the UI interface and business logic increases, this approach may become inflexible. The Vue3 version provides us with more options to make communication between components more convenient and flexible.

In Vue3, we can use provide and inject to create a dependency injection system that can be used across multiple nesting levels. Below is a sample code that shows how to use provide and inject to achieve communication between components.

// ParentComponent.vue
<template>
  <div>
    <h2 id="Parent-Component">Parent Component</h2>
    <child-component></child-component>
  </div>
</template>

<script>
import { provide, ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  setup() {
    const message = ref('Hello from parent!');

    provide('message', message);

    return {
      message
    };
  }
};
</script>


// ChildComponent.vue
<template>
  <div>
    <h2 id="Child-Component">Child Component</h2>
    <button @click="updateMessage">Update Message</button>
    <p>{{ message }}</p>
  </div>
</template>

<script>
import { inject } from 'vue';

export default {
  setup() {
    const message = inject('message');
    
    const updateMessage = () => {
      message.value = 'Updated message from child!';
    };

    return {
      message,
      updateMessage
    };
  }
};
</script>

In the above example, the parent component ParentComponent passes the message variable to the child component ChildComponent## through the provide function #. The child component receives the message variable provided by the parent component through the inject function. This way, child components can directly access the parent component's data and update it when needed.

Using

provide and inject can achieve flexible component communication, especially between multi-layer nested components. This approach not only reduces the complexity of transferring data between components, but also improves the readability and maintainability of the code.

In addition to

provide and inject, Vue3 also introduces a new global event bus (Event Bus) system, making communication between components more convenient. We can use the config option of the createApp function to create a global event bus, and then use $on, $off, $emit and other methods to monitor and trigger events.

The following is a sample code that uses the global event bus for component communication:

// main.js
import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);

app.config.globalProperties.$bus = createEventBus();

app.mount('#app');

// event-bus.js
import mitt from 'mitt';

export function createEventBus() {
  const bus = mitt();

  return {
    $on: bus.on,
    $off: bus.off,
    $emit: bus.emit
  };
}

// ParentComponent.vue
<template>
  <div>
    <h2 id="Parent-Component">Parent Component</h2>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>

<script>
export default {
  methods: {
    updateMessage() {
      this.$bus.$emit('message-updated', 'Updated message from parent!');
    }
  }
};
</script>


// ChildComponent.vue
<template>
  <div>
    <h2 id="Child-Component">Child Component</h2>
    <p>{{ message }}</p>
  </div>
</template>

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

In the above example, we achieved this by creating the global event bus

$bus Parent components pass data to child components. The parent component triggers the message-updated event by calling the $emit method and passes the new message as a parameter. The child component listens to the message-updated event and updates its own message data in the event callback.

The Vue3 framework provides us with a more flexible communication method between components. Whether it is a dependency injection system or a global event bus system, it makes component development more convenient and flexible. These new features allow us to better build complex applications and improve code readability and maintainability. We look forward to using these features in actual projects to improve development efficiency and code quality.

The above is the detailed content of Changes in Vue3 compared to Vue2: more flexible communication between components. For more information, please follow other related articles on the PHP Chinese website!