Detailed explanation of the implementation method of passing values ​​between parent and child components in vue

In Vue, parent-child component communication is a very common scenario. The following are the usage scenarios and their advantages and disadvantages:

Use scenarios:

The parent component needs to pass data to the child component: the parent component needs to pass certain data to the child component so that the child component can display or perform certain operations based on this data.

The child component needs to pass data to the parent component: the child component needs to pass certain data or event results to the parent component so that the parent component can further process or perform certain operations based on this data.

advantage:

Simple and easy to use: Through the props attribute and $emit method, data and event transfer between parent and child components can be realized, making it simple and easy to use.

Easy to realize two-way communication: Through the props attribute and $emit method, two-way communication between parent and child components can be realized, making data sharing and interaction between components more flexible.

shortcoming:

It may cause an increase in coupling between components: If the data and event delivery between parent and child components are too complex, it may cause an increase in coupling between components, which is not conducive to maintenance and expansion.

There may be performance issues: If a parent component needs to pass data or events to multiple child components, there may be performance issues because each child component needs to trigger the corresponding event and update the data.

There may be data race problems: If multiple child components pass data or events to the parent component at the same time, there may be data race problems because the parent component needs to process according to the data or event results of different child components, which may result in conflict or inconsistent results.

To sum up, parent-child component communication is a common scenario in Vue. Using props attributes and $emit methods can achieve simple and easy-to-use two-way communication. However, in practical applications, attention should be paid to avoiding excessive coupling and performance problems, as well as dealing with possible data competition problems.

In Vue, the following methods can be used to implement the parent component passing data to the child component and the child component passing data to the parent component:

1. Use props attribute (father passed through son):

Define a child component in the parent component and pass the data to the child component using the props attribute.

Use the props attribute in a child component to receive data passed by the parent component.

Sample code:

// Parent component<template>
  <div>
    <ChildComponent :message="parentMessage" />
  </div>
</template>

<script>
import ChildComponent from './';

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

// Subcomponent ()<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: ['message']
};
</script>`
//In the above example, the parent component passes the `parentMessage` data to the child component through the props property, which receives the data and displays it in the template.

2. Use events (children pass through parent):

Define an event in a child component and use$emitThe method triggers the event and passes data to the parent component.

Listen to the event using a listener in the parent component and receive data passed by the child component.

Sample code:

// Subcomponent ()<template>
  <div>
    <button @click="notifyParent">Notify Parent</button>
  </div>
</template>

<script>
export default {
  methods: {
    notifyParent() {
      const childData = 'Hello from child component!';
      this.$emit('child-event', childData);
    }
  }
};
</script>

// Parent component<template>
  <div>
    <ChildComponent @child-event="handleChildEvent" />
  </div>
</template>

<script>
import ChildComponent from './';

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleChildEvent(data) {
      (data); // Print "Hello from child component!"    }
  }
};
</script>
//In the above example, the child component defines a method named `notifyParent`, which triggers an event named `child-event` through `$emit` and passes the data to the parent component.  The parent component listens for the event and receives data passed by the child component.

Of course, the following are three other methods in Vue to pass data to child components and to pass data to parent components:

3. Use Vuex (only for shared state between parent and child components):

Use the Vuex repository to manage shared state between components.

In the parent component, pass state to the child component through the Vuex repository.

In child components, the state passed by the parent component is obtained through the Vuex repository.

Sample code:

// Vuex Store
import Vue from 'vue';
import Vuex from 'vuex';

(Vuex);

export default new ({
  state: {
    parentData: 'Hello from parent component!'
  },
  mutations: {
    updateParentData(state, data) {
       = data;
    }
  }
});

// Parent component<template>
  <div>
    <ChildComponent :parentData="parentData" @update-data="updateData" />
  </div>
</template>

<script>
import ChildComponent from './';
import store from './store'; // Introduce Vuex Store
export default {
  components: {
    ChildComponent
  },
  computed: {
    parentData() {
      return ;
    }
  },
  methods: {
    updateData(data) {
      ('updateParentData', data); // Submit mutation update status    }
  }
};
</script>

// Subcomponent ()<template>
  <div>
    <button @click="notifyParent">Notify Parent</button>
  </div>
</template>

<script>
export default {
  computed: {
    parentData() {
      return this.$; // Get the status data passed by the parent component    }
  },
  methods: {
    notifyParent() {
      const childData = 'Hello from child component!'; // Children component data are shared by passing events to the parent component to update status data.      this.$emit('update-data', childData); // Trigger a custom event to pass the data to the parent component to update the status data.  You need to listen to the event in the parent component and call the corresponding method.      //like：this.$emit('update-data', childData); this.$emit('update-data', childData); 

In the above example, the status data between the parent component and the child component is managed through the Vuex repository. The child component displays the data passed by the parent component by obtaining the status data and passes the data to the parent component to update the status data by triggering a custom event. The parent component updates the status data by listening to custom events and calling the corresponding method, and uses computed properties to obtain the updated status data displayed in the template.

This is the introduction to this article about the implementation method of passing values ​​between parents and children components in vue. This is the end. For more related content about transfer values ​​between parents and children components of vue, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!