A complete guide to implementing component communication in Vue2.x (props, $emit, Vuex)

Vue2.x Complete Guide to Implementing Component Communication (props, $emit, Vuex)

Vue, as a modern JavaScript framework, is very popular when developing Web applications. Vue's componentized architecture allows developers to easily separate code and functionality, while also enabling flexible communication through different components.

In this article, we will explore three methods of component communication in Vue2.x: props, $emit and Vuex, to help you better manage resources when building Vue applications.

Props

props is one of Vue’s component parameter passing methods. Values ​​can be passed to child components using props. In child components, the values ​​of props are read-only, which means they cannot be modified. This enables one-way flow of data, making it easier to maintain and debug Vue applications.

Here is an example:

In the parent component, we can create a prop named "parent" and pass it a prop named "message".

<template>
  <div>
    <child :message="msg"></child>
  </div>
</template>

<script>
import Child from "./Child.vue";

export default {
  name: "Parent",
  components: {
    Child
  },
  data() {
    return {
      msg: "Hello World!"
    };
  }
};
</script>

In the child component, we can receive the passed props value and use it in the template.

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

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

In this example, "msg" is defined in the parent component and "message" is the name of the props - which must match the value in the parent component. Child components must use the "props" option to define the data type of the props and the values ​​that must be passed.

This is a basic example for data passing through props. If you have multiple props that need to be passed, you can put them in an object and pass them to the child component.

$emit

$emit is another widely used component communication method in Vue. You can use $emit to trigger custom events and pass data to the parent component. Unlike props, $emit can achieve two-way data transfer, making resource sharing between components in Vue applications more convenient.

Unlike props, $emit can pass data from child components to parent components. Here is an example:

In this example, we define a custom event name "greeting" and fire the event when a button is clicked. We also pass the selected item into the event.

<template>
  <div>
    <button @click="sayHi()">Click me</button>
  </div>
</template>

<script>
export default {
  name: "Child",
  methods: {
    sayHi() {
      this.$emit("greeting", {
        message: "Hello World!"
      });
    }
  }
};
</script>

In the parent component, we can listen to custom events in the child component and use the passed data when the event fires.

<template>
  <div>
    <child @greeting="handleGreeting"></child>
    <div>{{ greeting }}</div>
  </div>
</template>

<script>
import Child from "./Child.vue";

export default {
  name: "Parent",
  components: {
    Child
  },
  data() {
    return {
      greeting: ""
    };
  },
  methods: {
    handleGreeting(data) {
      this.greeting = data.message;
    }
  }
};
</script>

In this example, "handleGreeting" is the method used to handle the event. This method receives as parameter a custom event triggered by the child component. Data transfer can be obtained from the $emit event in the child component.

Vuex

Vuex is a state management library for Vue.js applications. It allows components to share state, making communication between components easier and more efficient.

Here is an example:

In this example, we share data by creating a Vuex store named "store". In the state attribute, we can define the data that needs to be shared. In the mutations attribute, we can define functions for modifying data in the store. In the getter attribute, we can define functions that process the data and return the shared value.

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    greeting: "Hello World!"
  },
  mutations: {
    changeGreeting(state, payload) {
      state.greeting = payload.greeting;
    }
  },
  getters: {
    getGreeting(state) {
      return state.greeting;
    }
  }
});

You can use data and functions in the store in any Vue component. In this example, we have two buttons set up. Clicking the "greeting" button will display the value of the "greeting" attribute in the store. The "change greeting" button will change the "greeting" value in the store by calling the function we defined in the mutations attribute through the commit function.

<template>
  <div>
    <div>{{ greeting }}</div>
    <button @click="getGreeting">greeting</button>
    <button @click="changeGreeting">change greeting</button>
  </div>
</template>

<script>
import { mapGetters, mapMutations } from "vuex";

export default {
  name: "Child",
  computed: {
    ...mapGetters(["getGreeting"])
  },
  methods: {
    ...mapMutations(["changeGreeting"]),
    getGreeting() {
      alert(this.getGreeting);
    }
  }
};
</script>

In this example, "mapGetters" and "mapMutations" can be used to map data and functions in the store to the component's computed properties and methods. In the method, we use alert to display the value of the "greeting" attribute in the store. When the "change greeting" button is clicked the changeGreeting function will be called to change the "greeting" attribute in the store.

Summary

The above are the three methods to implement component communication in Vue2.x: props, $emit and Vuex. In actual development, you can choose which communication method to use based on different needs and scenarios.

Through props, one-way data transmission can be achieved to ensure that the data flow between components is clear and clear; $emit can perform two-way data transmission between components, so that the resources between components in the Vue application Sharing is more convenient; and by using Vuex, public data can be saved in the store, making communication between components easier and more efficient.

The above is the detailed content of A complete guide to implementing component communication in Vue2.x (props, $emit, Vuex). For more information, please follow other related articles on the PHP Chinese website!