How to understand Vue’s one-way data flow

In Vue, data flow refers to the way data is transferred and managed. Vue uses one-way data flow. Its core concept is that the flow direction of data is one-way, that is, from the parent component to the child component. This design helps improve the maintainability and predictability of your code.

Specifically, Vue’s one-way data flow now has the following aspects:

1. Data flow direction: In Vue, data is generally passed from parent components to child components, forming a one-way flow process. This means that only the parent component can change data, while child components can only receive data through props and cannot modify them directly. If a subcomponent needs to perform some operations or calculations based on the received data, it can use computed properties (computed) or methods (methods) to achieve it, but it cannot directly modify the data in props.
2. Easy to trace data flow: Since data can only be passed from parent component to child component, we can easily trace the flow of data and understand how data is passed between components. This helps us better understand the dependencies and data flow between components, making code debugging and maintenance easier.
3. Improve code maintainability and predictability: The design principle of one-way data flow makes the dependencies between components clearer and reduces the coupling between components. This makes the code easier to maintain, since modifications to one component usually only affect its downstream components and not other unrelated components. At the same time, because the data flow is one-way, the changes in the data are more predictable, which helps us better understand and control the status and behavior of the application.
4. Simplify communication between components: In Vue, communication between components is mainly achieved through props and events. The parent component passes data to the child component through props, and the child component passes information or data back to the parent component through events. This clear communication method makes the interaction between components simpler and more intuitive, reducing development difficulty and the probability of errors.

How to implement one-way data flow in Vue

1. Use props to pass data

• Parent components can pass data to child components through props. Child components accept this data by declaring props, which can be arrays or objects, used to receive data from parent components.

<template>
  <div style="margin:50px;">
    <p>{{name}}</p>
    <!---->
    <textChild :author="name"></textChild>
  </div>
</template>

<script>
import textChild from './textChild.vue'//
export default { 
  components:{
    textChild,//
  },
  data(){
    return {
      //
      name:"brave"
    }
  },
  mounted(){
    
  },   
  methods: {  
    
  },  
};
</script>

In the parent component, we define a namedata, then introduce textChildthe child component, register to use it, and use it in the template <textChild :author="name"></textChild>to namepass it to the child component as a property textChild. authorThe “:” in front of the property name here is Vue’s special syntax, indicating that this is a dynamic binding, that is, the bound value is responsive. If namethe value of the parent component changes, the value received by the child component will be updated accordingly.

<template>
  <div>
    <p>{{author}}</p>
    <p>{{authorName}}</p>
  </div>
</template>
<script>
export default {
  props:{
    author:{
      type:String, //
      required:true,//
      default:'',//
    },
  },
  //
  props:['author'],
  data(){
    return {
      authorName:this.author,
    }
  }, 
  mounted(){
    
  },   
  methods: {  
    
  },  
};
</script>

In the child component, we propsdeclare an authorattribute through the option to receive the data passed by the parent component. In the template, we can use it directly {{author}}to display this data. You can also receive attributes by datadeclaring a variable in and use it in the template to display this data.authorNameauthor{{authorName}}

2. Use event communication

• When a child component needs to modify the data received from the parent component, it cannot modify it directly. Instead, it needs to trigger an event through $emit, and the parent component listens to this event and responds to the update of the data.

<template>
  <div>
    <p>{{author}}</p>
    <p>{{authorName}}</p>
    <el-button type="primary" size="small" @click="updateName">rename</el-button>
  </div>
</template>
<script>
export default {
  props:{
    author:{
      type:String, //
      required:true,//
      default:'',//
    },
  },
  //
  props:['author'],
  data(){
    return {
      authorName:this.author,
    }
  }, 
  mounted(){
    
  },   
  methods: {  
    //
    updateName(){
      this.authorName = "new name"
      this.$emit('getChildName','new name')
    },
  },  
};
</script>

In the child component, we modify the name variable of the parent component by clicking the rename card. Click the button to trigger the updateName method. In the updateName method, use the method this.$emitthat triggers the parent component getChildNameto pass the modified data to the parent component.

3. Use Vuex to manage global state

• For complex state management across components, Vue submitted the Vuex library. Vuex manages the state of all components of the application through centralized storage, and uses corresponding rules to ensure that the state changes in a predictable way.