Parent-child component communication in Vue and using sync to synchronize parent-child component data

Preface

Parent-child component communication can be divided into two cases:

1. Parent component passes data to child component
2. Child components pass data to parent components

Generally speaking, the problem of data transfer in situation 1 can be solved by props, so I will not go into details here.

Child components pass data to parent components

Mainly talk about the realization of 2 scenarios, there are three ways:

1. Through props, the parent component passes data and functions that change data to the child component. By calling the function passed by the parent component in the child component, the parent component data is updated (data is passed to the parent component) (corresponding response events are required in the child component)

2. By triggering a custom event (vm.$emit) in the child component, the data is passed back to the parent component using v-on: [custom event] to listen for the function

3. Mark the child component through ref, and the parent component can directly obtain the child component data through vm.$refs.[child component ref].[child component property/method]

Below I will show you one by one

1. Pass functions from parent to child components through props, and call functions to change parent component data

No code is shown here

Firstly, it is relatively simple and secondly, it is obviously not the best practice in Vue (it is more common in react)
If you want to see the code, you can look here: "【Vue】A brief discussion on data exchange between components in different scenarios of Vue" http://www.cnblogs.com/penghuwan/p/7286912.html (in the section on data exchange between sibling components)

2. Pass data from child components to parent components through custom events

We can trigger a custom event in the child component through $emit(event, [... parameters]), so that the parent component can directly use v-on to listen to the events triggered by the child component where the child component is used, and can obtain all the parameters passed from the child component in turn in the listening function

For example:
Write in a subcomponent:

this.emit('eventYouDefined', arg);

Then you can listen in the child component template of the parent component:
// Here is the template of the parent component:

<Son v-on: eventYouDefined = "functionYours" />

Here is an example

Parent Component

<template>
  <div id="father">
    <div>
       I am the parent component and I received:
      {{ text || 'No data yet' }}
      <son v-on:sendData='getSonText'></son>
    </div>
  </div>
</template>
 
<script>
import son from './son.vue'
export default {
  data: function () {
    return {
      text: ''
    }
  },
  components:
    son: son
  },
  methods: {
    getSonText (text) {
      this.text = text
    }
  }
}

</script>
 
<style scoped>
#father div {
  padding: 10px;
  margin: 10px;
  border: 1px solid grey;
  overflow: hidden;
}
</style>

Subcomponents:

<template>
  <div>
    <p>I am a child component, the data I have: {{ text }}</p>
    <button @click="sendData">
      Send data</button>
  </div>
</template>
 
<script>
export default {
  data () {
    return {
      text: 'Data from child components'
    }
  },
  methods: {
    sendData() {
      this.$emit('sendData', this.text)
    }
  }
}
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
   button { float: left }
</style>

Before clicking the "Send Data" button in the child component, the parent component has not received any data (text is an empty string), then {{ text || 'No data yet' }} will display the default text: 'No data yet'

After clicking the "Send Data" button:

Because the sendData custom event is triggered, through

this.$emit('sendData', this.text) //This here points to the child component instance)

The text data of the child component is in the parent component:

 <son v-on:sendData='getSonText'></son>

The getSonText function in the component receives the parameter as a parameter, thus completing the parameter transfer process from the child component to the parent component.

3. Get the data of the child component directly in the parent component through the ref attribute

For the processing scenarios one and two we talked about above, there is a limitation that they both need to be based on the event mechanism (whether it is a native event like click or a custom event), and the function can only be called to pass the data when the event occurs.

But if there is nothing like a "button" in the child component, and therefore it is impossible to create native events, and there is no way to find a time to trigger a custom event, how can data be passed from the child component to the parent component? ?

At this time, we can only "directly obtain" the child component's data from the parent component, using the ref attribute

Ref is a Vue attribute that we often use. It can be used to easily and conveniently obtain the DOM instance from the template of this component. In fact, if you set a ref for a child component in the parent component, you can directly get the data through vm.$refs.[ref of the child component].[attribute of the child component], for example:

Parent component:

<template>
  <div id="father">
    <div>
       I am the parent component and I received:
      {{ text || 'No data yet' }}
      <button @click="getSonText()">Accept data</button>
      <son ref='son'></son>
    </div>
  </div>
</template>
 
<script>
import son from './son.vue'
export default {
  data: function () {
    return {
      text: ''
    }
  },
  components:
    son: son
  },
  methods: {
    getSonText () {
      this.text = this.$refs.son.text
    }
  }
}

</script>
 
<style scoped>
#father div {
  padding: 10px;
  margin: 10px;
  border: 1px solid grey;
  overflow: hidden;
}
</style>

Subcomponents:

<template>
  <div>
    <p>I am a child component, the data I have: {{ text }}</p>
  </div>
</template>
 
<script>
export default {
  data () {
    return {
      text: 'Data from child components'
    }
  }
}
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
   button { float: left }
</style>

demo:

Before clicking the "Accept Data" button:

After clicking the Accept Data button:

Use sync to achieve two-way data binding, thereby synchronizing parent-child component data

Through the above three methods, I think you should be able to solve most of the parent-child component communication scenarios, but let's think about the above communication scenarios carefully, and we will find that they may still have problems:

When passing data from a child component to a parent component, the data in the parent and child components is still not synchronized all the time.

But in some special demand scenarios, we may want the data in the parent and child components to be synchronized at all times. In this case, you may do it like this:

This is the template in the parent component:

<son :foo="bar" v-on:update="val => bar = val"></son>

In the child component, we receive foo through the props declaration and use

props: {
     foo: [type]
}

At the same time, whenever the data in the subcomponent changes,

this.$emit('update', newValue)

Pass the parameter newValue to the "val" in the listening function in the parent component template. Then pass

val => bar = val

This expression implements bar = newValue. At this time, we find that the key data bar in the parent component has been changed (equal) by the child component!

Through two-way data binding, the parent (component) can modify the child's data, and the child can also modify the parent's data

Vue provides the sync modifier to simplify the above code, for example:

<comp :foo.sync="bar"></comp>

will be expanded to:

<comp :foo="bar" @update:foo="val => bar = val"></comp>

Then when you need to change the parent component data in the child component, you need to trigger the following custom event:

this.$emit("update:foo", newValue)

[Note] You may feel that this seems to overlap with the content of the section "Passing data from child components to parent components through custom events (emit)" mentioned above.

However, they are not. There is a difference in the parent-child component relationship between the two. Below I will use a key line of code to prove their difference.

1. In the section where we explain sync, the response expression that runs when a custom event occurs is:
"val => bar = val" in <son :foo="bar" v-on:update="val => bar = val"></son>

2. In the second part of "Passing data from child components to parent components through custom events", the response expression that runs when a custom event occurs is:
<Son v-on: eventYouDefined = "arg => functionYours(arg)" />

For the former, the expression val => bar = val means forcing the parent component's data to be equal to the data passed by the child component. At this time, we find that the status of the parent and child components is equal. The parent can change the child (data), and the child can also change the parent (data)

For the latter, your functionYours is defined in the parent component. In this function, you can perform any operation or processing on the arg data received from the child component. The decision-making power lies entirely with the parent component, that is: the parent can change the child (data), but the child cannot directly change the parent (data)! , the change of data in the parent can only be determined by itself

Here is a demo:

Parent component:

<template>
  <div id="father">
    <div>
       I am the parent component <son
        :wisdom.sync="wisdom"
        :magic.sync="magic"
        :attack.sync="attack"
        :defense.sync="defense">
      </son>
      <p>Intelligence: {{ wisdom }}</p>
      <p>Membrane method: {{ magic }}</p>
      <p>Attack: {{ attack }}</p>
      <p>Defense: {{ defense }}</p>
    </div>
  </div>
</template>
 
<script>
import son from './son.vue'
export default {
  data: function () {
    return {
      wisdom: 90,
      magic: 160,
      attack: 100,
      defense: 80
    }
  },
  components:
    son: son
  }
}

</script>
 
<style scoped>
#father div {
  padding: 10px;
  margin: 10px;
  border: 1px solid grey;
  overflow: hidden;
}
</style>

Subcomponents:

<template>
  <div>
    <p>I am a subcomponent</p>
    <p>Intelligence: {{ wisdom }}</p>
    <p>Membrane method: {{ magic }}</p>
    <p>Attack: {{ attack }}</p>
    <p>Defense: {{ defense }}</p>
    <button @click="increment('wisdom')">Increase intelligence</button>
    <button @click="increment('magic')">Increase membrane method</button>
    <button @click="increment('attack')">Increase attack</button>
    <button @click="increment('defense')">Increase defense</button>
  </div>
</template>
 
<script>
export default {
  props: {
    wisdom: Number,
    magic: Number,
    attack: Number,
    defense: Number
  },

  methods: {
    increment(dataName) {
      let newValue = this[dataName] + 1
      this.$emit(`update:${dataName}`, newValue)
    }
  }
}
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
   button { float: left }
</style>

Before Click

When you click the "Increase Intelligence" button in the Add Subcomponent, the intelligence parameters in both the parent and subcomponents change from 90 to 91.

When you click the "Add Membrane Method" button in the Add Subcomponent, the intelligence parameters in the parent component and the subcomponent change from 160 to 161 at the same time.

Two-way data binding is a double-edged sword

From the advantages:

1. It realizes the "real-time" synchronization of parent-child component data, which may be used in some data scenarios
2. The syntax sugar provided by sync makes the code of two-way binding very simple

On the downside:

It destroys the simplicity of one-way data flow, which increases the difficulty of analyzing data.

When the prop modified by sync is an object

Let's modify the above example and wrap the data in an object and pass it down:

Parent Component

<template>
  <div id="father">
    <div>
       I am the parent component <son :analysisData.sync="analysisData">
      </son>
      <p>Intelligence: {{ analysisData.wisdom }}</p>
      <p>Membrane method: {{ analysisData.magic }}</p>
      <p>Attack: {{ analysisData.attack }}</p>
      <p>Defense: {{ analysisData.defense }}</p>
    </div>
  </div>
</template>
 
<script>
import son from './son.vue'
export default {
  data: function () {
    return {
      analysisData:
        wisdom: 90,
        magic: 160,
        attack: 100,
        defense: 80
      }
    }
  },
  components:
    son: son
  }
}

</script>
 
<style scoped>
#father div {
  padding: 10px;
  margin: 10px;
  border: 1px solid grey;
  overflow: hidden;
}
</style>

Subcomponents

<template>
  <div>
    <p>I am a subcomponent</p>
    <p>Intelligence: {{ analysisData.wisdom }}</p>
    <p>Membrane method: {{ analysisData.magic }}</p>
    <p>Attack: {{ analysisData.attack }}</p>
    <p>Defense: {{ analysisData.defense }}</p>
    <button @click="increment('wisdom')">Increase intelligence</button>
    <button @click="increment('magic')">Increase membrane method</button>
    <button @click="increment('attack')">Increase attack</button>
    <button @click="increment('defense')">Increase defense</button>
  </div>
</template>
 
<script>
export default {
  props: {
    analysisData: Object
  },

  methods: {
    increment(dataName) {
      let newObj = JSON.parse(JSON.stringify(this.analysisData))
      newObj[dataName] += 1
      this.$emit('update:analysisData', newObj)
    }
  }
}
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
   button { float: left }
</style>

Same demo as above

Do not meet the requirement of "parent-child component data synchronization" by modifying reference type props in child components!

The data of the parent component is passed to the child component, which is usually achieved through props. When implementing the requirement of "parent-child component data synchronization", you may find that it is feasible to modify the props of reference types (such as arrays and objects) in the child component.

1. Not only can the data in the parent component be modified at the same time (because the same data is originally referenced)
2. And it will not be discovered by Vue's detection mechanism! (No error will be reported)

But don't do this, it makes the data flow much harder to analyze, if you try this, the above approach is probably better. Don't do this, bad approach:

Parent component:

<template>
  <div id="father">
    <div>
       I am the parent component <son :analysisData="analysisData">
      </son>
      <p>Intelligence: {{ analysisData.wisdom }}</p>
      <p>Membrane method: {{ analysisData.magic }}</p>
      <p>Attack: {{ analysisData.attack }}</p>
      <p>Defense: {{ analysisData.defense }}</p>
    </div>
  </div>
</template>
 
<script>
import son from './son.vue'
export default {
  data: function () {
    return {
      analysisData:
        wisdom: 90,
        magic: 160,
        attack: 100,
        defense: 80
      }
    }
  },
  components:
    son: son
  }
}

</script>
 
<style scoped>
#father div {
  padding: 10px;
  margin: 10px;
  border: 1px solid grey;
  overflow: hidden;
}
</style>

Subcomponents:

<template>
  <div>
    <p>I am a subcomponent</p>
    <p>Intelligence: {{ analysisData.wisdom }}</p>
    <p>Membrane method: {{ analysisData.magic }}</p>
    <p>Attack: {{ analysisData.attack }}</p>
    <p>Defense: {{ analysisData.defense }}</p>
    <button @click="increment ('wisdom')">Increase intelligence</button>
    <button @click="increment ('magic')">Increase membrane method</button>
    <button @click="increment ('attack')">Increase attack</button>
    <button @click="increment ('defense')">Increase defense</button>
  </div>
</template>
 
<script>
export default {
  props: {
    analysisData: Object
  },

  methods: {
    increment(dataName) {
      let obj = this.analysisData
      obj[dataName] += 1
    }
  }
}
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
   button { float: left }
</style>

The above is the details of parent-child component communication in Vue and the use of sync to synchronize parent-child component data. For more information about Vue, please pay attention to other related articles on 123WORDPRESS.COM!