Summary of common ways to pass values ​​in components in vue

In , data transfer between components is a common requirement. Vue provides a variety of ways to achieve this, including props, global event bus, subscription and publishing of messages, etc. I will explain these methods in detail below:

Props is the basic way to pass data between Vue components. The parent component can pass data to the child component via props.

// Parent component<template>
  <child-component :message="parentMessage"></child-component>
</template>

<script>
import ChildComponent from './';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from parent'
    };
  }
}
</script>

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

<script>
export default {
  props: ['message']
}
</script>

2. Global Event Bus

The Vue instance implements an event interface that you can use to create custom events. A global event bus is a pattern of passing data between components, but it is not the official recommended way of Vue because it can complicate the logic of the code and be difficult to maintain. But in some scenarios, it is still a useful tool.

First, you need to create a global Vue instance in your file:

// 
import Vue from 'vue';
import App from './';
export const EventBus = new Vue();
new Vue({
  render: h => h(App),
}).$mount('#app');

You can then use EventBus in any component to trigger and listen for events:

// Component A<script>
import { EventBus } from './';
export default {
  methods: {
    sendMessage() {
      EventBus.$emit('message', 'Hello from Component A');
    }
  }
}
</script>

// Component B<script>
import { EventBus } from './';
export default {
  created() {
    EventBus.$on('message', message => {
      (message); // 'Hello from Component A'
    });
  }
}
</script>

3. Subscription and Publishing of Messages (Vuex)

Vuex is a state management model developed specifically for applications. It uses centralized storage to manage the state of all components of the application and ensures that the state changes in a predictable way with corresponding rules. You can pass data between components via Vuex. The core concepts of Vuex are states, mutations, actions and getters. Where mutations are used to change state, actions are used to submit mutations, and can contain any asynchronous operations. getters is used to derive some state from state. The specific usage methods are as follows:

First, you need to install and configure Vuex in your project:

You can then use this.$ in any component to access the state, use this.$ to commit the mutation, and use this.$ to distribute the action. For example: Change the state in one component and respond to the change in another component. In Vuex, state changes must be passed through mutation. Each mutation has a string event type and a callback function. This callback function is where we actually make the state change, and it will accept state as the first parameter. We cannot directly change the state in state, we must explicitly return a new state. The specific code is as follows: First define a mutation: Then submit this mutation in one component: listen for state changes in another component and respond: Using Vuex can make our applications more predictable and maintainable. The above are several ways to implement the value transmission between components in Vue. It should be noted that choosing the right method is crucial to keeping the code readable and maintainable.

Here is a simple example of Vuex implementing message subscription and publishing:

First, you need to install Vuex. You can install it through npm:

npm install vuex --save

Then, you need to introduce and use Vuex in your Vue app. In your file:

import Vue from 'vue'
import Vuex from 'vuex'
import App from './'

(Vuex)

const store = new ({
  state: {
    message: ''
  },
  mutations: {
    setMessage(state, message) {
       = message
    }
  },
  actions: {
    sendMessage({ commit }, message) {
      commit('setMessage', message)
    }
  },
  getters: {
    message: state => 
  }
})

new Vue({
  store,
  render: h => h(App),
}).$mount('#app')

In this example, we create a Vuex store that has a state message, a mutation setMessage, an action sendMessage, and a getter message. The status message is used to store our messages, the mutation setMessage is used to change the state, the action sendMessage is used to submit the mutation, and the getter message is used to get messages from the state.

Now you can publish and subscribe to messages in any component. For example:

Publish a message in a component:

<template>
  <button @click="sendMessage">Send Message</button>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$('sendMessage', 'Hello from Component A')
    }
  }
}
</script>

Subscribe to messages in another component:

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

<script>
export default {
  computed: {
    message() {
      return this.$;
    }
  },
  watch: {
    // Listen to the message changes, and perform some operations when the message changes    message(newVal, oldVal) {
      ('Message changed from', oldVal, 'to', newVal);
    }
  },
  created() {
    ('Initial message:', ); // 'Hello from Component A'
  },
};
</script>

This is the article about the common ways to pass values ​​in vue. This is the end of this article. For more related content on vue component value transmission, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!