This is the 17th day of my participation in the August Text Challenge.More challenges in August

In Vue, the most common way for parent components to communicate is to pass data through props. The props value can only be updated in the parent component and passed to the child component. Inside the child component, it is not allowed to change the props value passed in to ensure one-way flow of data. But there are times when we need to change the props property value inside the child component and update it to the parent component, and we need the.sync modifier.

1. The way I wrote it before

The child component can communicate with the parent component through $emit. In this way, the parent component’s data can be changed indirectly, so that the value of the child component props can be changed

The parent component

<template>
 <div>
    <Child 
      :title="childTitle" @changeTitle="CTitle" 
      :subTitle="childSubTitle" @update:subTitle="val => childSubTitle = val">
   </Child>
 </div>
</template>
 
<script>
import Child from './child.vue'
export default {
  data() { 
    return {
      childTitle:'hello world'.childSubTitle:'hello',}},components:{
    Child
  },
  methods: {
   CTitle(msg){
      this.childTitle = msg; }},}</script> 
Copy the code

Child components

<template>
  <div class="child">
    <h2>{{title}}</h2>
    <h4>{{subTitle}}</h4>
    <button @click="changeTitle">Change the English title</button>
    <button @click="changeSubTitle">Change the Chinese title</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newTitle:'Vue'.newSubTitle:'Try again tomorrow.'
    };
  },
  props: {
    title: {type:String.default:' ',},subTitle: {type:String.default:' ',}},methods: {changeTitle(){
      this.$emit('changeTitle'.this.newTitle)
    },
    changeSubTitle(){
      this.$emit('update:subTitle'.this.newSubTitle)
    },
  },
};
</script>
Copy the code

2.. sync modifier

To facilitate this, Vue provides the.sync modifier, which is a shorthand that can be used as a syntactic sugar, such as V-on: click, which can be shortened to @click.

The parent component is written in sync as follows:

The parent component

<template>
 <div>
   <h1>Parent component: {{childSubTitle}}</h1>
   <Child :subTitle.sync="childSubTitle"></Child>
 </div>
</template>
 
<script>
import Child from './child.vue'
export default {
  data() { 
    return {
      childSubTitle:'hello',}},components:{
    Child
  }, 
}
</script> 
Copy the code

Child components

<template>
  <div class="child">
    <h4>{{subTitle}}</h4>
    <button @click="changeSubTitle">Change the Chinese title</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newSubTitle:'Try again tomorrow.'
    };
  },
  props: {
    subTitle: {type:String.default:' ',}},methods: {changeSubTitle(){
      this.$emit('update:subTitle'.this.newSubTitle)
    },
  },
};
</script>
Copy the code

Conclusion:

The parent component sends the value of message to its child component, which emits the event update: XXX to modify the parent component’s message. This can be simplified by the.sync modifier (the sync operator must emit the ‘update: XXX ‘name) :

<child-cop :xxx.sync="message"></child-cop>
Copy the code

The.sync modifier converts the above code to

<child-cop :xxx="message" @update:xxx="message = $event"></child-cop>
Copy the code

Note:

The parent component

<template>
 <div>
   <h1>Parent component: {{doc.title}}--{{doc.content}}</h1>
   <Child v-bind.sync="doc"></Child>
 </div>
</template>
 
<script>
import Child from './child.vue'
export default {
  data() { 
    return {
      doc: {title:'front end'.content:'Vue',}}},components:{
    Child
  },
}
</script> 
Copy the code

Child components

<template>
  <div class="child">
    <h4>{{title}}--{{content}}</h4>
    <button @click="change">change</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newTitle:'Try again tomorrow.'
    };
  },
  props: {
    title: {type:String.default:' ',},content: {type:String.default:' ',}},methods: {change(){
      this.$emit('update:title'.this.newTitle);
      this.$emit('update:content'.'In Vue, child component passes value to parent component and.sync modifier details'); ,}}};</script>
Copy the code

Click the button after effect