Comparison of multi-level delivery schemes in Vue component communication

Comparison of multi-level delivery schemes in Vue component communication

Vue is a very popular front-end framework. It provides a component-based development method, through the nesting and communication of components. development of complex applications. In actual development, communication between components is often an important issue. When there are multi-level relationships between components, how to efficiently transfer data becomes a question that developers need to think about. This article will introduce several common multi-level component communication schemes and compare them.

1. Using props and $emit

Vue provides two methods, props and $emit, to implement data transfer between parent and child components. Props are used by parent components to pass data to child components, and child components obtain data through props. $emit is used by child components to pass data to parent components. The parent component obtains data by listening to the $emit event on child components.

The sample code is as follows:

Parent component:

<template>
  <child-component :message="message" @update-message="updateMessage"></child-component>
</template>

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

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

Child component:

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

<script>
export default {
  props: {
    message: {
      type: String,
      default: ''
    }
  },
  methods: {
    sendMessage() {
      this.$emit('update-message', 'Hello, Vue!')
    }
  }
}
</script>

This solution is suitable for communication between parent and child components, but when When there are multi-level relationships between components, props and $emit need to be continuously passed among the intermediate components, and the code will become complex and difficult to maintain.

2. Using Event Bus

Event Bus is a global event bus that implements communication between components by creating a global Vue instance. The component listens for events through $on and triggers events through $emit.

The sample code is as follows:

EventBus.js:

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

Parent component:

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

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

export default {
  components: {
    ChildComponent
  },
  mounted() {
    EventBus.$on('update-message', (newMessage) => {
      this.message = newMessage
    })
  }
}
</script>

Child component:

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

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

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

Use Event Bus Communication between any components can be achieved, but because it is a global event bus, naming conflicts and event confusion are prone to occur. And because components communicate directly through events, it is unintuitive and difficult to track.

3. Using Vuex

Vuex is Vue’s official state management library, used to implement shared state between components. In Vuex, data is stored in a centralized store, and components change the data by calling store methods.

The sample code is as follows:

store.js:

import Vuex from 'vuex'
import Vue from 'vue'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    message: ''
  },
  mutations: {
    updateMessage(state, newMessage) {
      state.message = newMessage
    }
  }
})

Parent component:

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

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

export default {
  components: {
    ChildComponent
  },
  computed: {
    message() {
      return this.$store.state.message
    }
  }
}
</script>

Child component:

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

<script>
import store from './store.js'

export default {
  methods: {
    sendMessage() {
      this.$store.commit('updateMessage', 'Hello, Vue!')
    }
  }
}
</script>

Using Vuex can It solves the problem of communication between components very well, especially suitable for components with multi-level relationships. However, because data needs to be transferred through the store, the store needs to be introduced into the component and the data changed through the commit method, which relatively increases the complexity of the code.

To sum up, the multi-level delivery solutions in Vue component communication include props and $emit, Event Bus and Vuex. Depending on the actual situation, choosing an appropriate solution can better improve development efficiency and code maintainability.

The above is the detailed content of Comparison of multi-level delivery schemes in Vue component communication. For more information, please follow other related articles on the PHP Chinese website!