One of the highlights of Vue project is componentization. Using components can greatly improve the reuse rate of code in the project and reduce the amount of code. But the biggest difficulty of using components is the communication between parent and child components.

Father of child communication

Parent component

<template>
  <div class="parent">
    I am the parent component
    <! -- the parent component listens for the say method triggered by the child component and calls its own parentsay method -- >
    <! -- pass the data of the parent component to the child component through: MSG -- >
    <children :msg="msg" @say="parentSay"></children>
  </div>
</template>

<script>
import Children from './children.vue'
export default {
  data () {
    return {
      msg: 'hello, children'
    }
  },
  methods: {
      //Parameters are the data passed by subcomponents
      parentSay(msg){
          console.log(msg) // hello, parent
      }
  },

  //Introduce subcomponents
  components:{
      children: Children
  }
}
</script>

Sub components

<template>
  <div class="hello">
    <div class="children" @click="say">
      I am a subcomponent
      <div>
        The parent component said to me: {{MSG}}
      </div>
    </div>

  </div>
</template>

<script>

  export default {
      //Data passed in by the parent component through props attribute
      props: {
          msg: {
              type: String,
              default: () => {
                  return ''
              }
          }
      },
      data () {
        return {
            childrenSay: 'hello, parent'
        }
      },

      methods: {
          //The child component triggers the function defined in the parent component through the emit method, thus passing the data in the child component to the parent component
          say(){
              this.$emit('say' , this.childrenSay);
          }
      }
  }
</script>

The sub component uses the $emit method to call the method of the parent component to achieve the purpose of communicating with the parent.

Parent communicator

Parent component

<!--Html-->
<template>
   <! -- parent component triggers click method -- >
  <div class="parent" @click="say">
    I am the parent component
    <! -- Mark subcomponents with ref -- >
    <children ref="child"></children>
  </div>
</template>

<script>
import Children from './children.vue'
export default {
  data () {
    return {
        msg: "hello,my son"
    }
  },
  methods: {
      //Call the parentsay method of the subcomponent through $refs
      say(){
         this.$refs.child.parentSay(this.msg);
      }
  },

  //Introduce subcomponents
  components:{
      children: Children
  }
}
</script>

Sub components

<template>
  <div class="hello">
    <div class="children" >
      I am a subcomponent
      <div>
        The parent component said to me: {{MSG}}
      </div>
    </div>

  </div>
</template>

<script>

  export default {
      data () {
        return {
            msg: ''
        }
      },

      methods: {
          //Parentsay, the JavaScript method called by the parent component
          parentSay(msg){
              this.msg = msg;
          }
      }
  }
</script>

Parent component passed$refsCall the method of the subcomponent.
The above is the communication mode of parent-child components. The parent-child components directly use props to transfer data, or use$emitand$refsRely on events to pass data.

Communication promotion of parent-child components

In the above, the child correspondence parent is in theClick event triggered in childThen calling the parent component’s method, the parent communicator is in theClick event triggered in parentCall the method of the subcomponent. But it may exist in the actual situationClick event is not allowed for child component when communicating with parentAnd the event is in the parent orClick event in child component when parent communicates with childMedium.

Child communication parent time hit event in parent component

This is a common situation. For example, when a form is submitted, the content of the form is a child component, and the Save button is on the parent component. At this time, click Save to get the value of the subcomponent form. In this case, it is not only the parent communication and the parent communication, but also the combination of the two to complete the whole communication process.

The idea of implementation is to click the event in the parent component, first call the method of the child component through parent-child communication, then use the method in the child component to call another method of the parent component and pass the information back. Here is a code demonstration:

Parent component

<template>
  <div class="parent" @click="getData">
    I am the parent component
    <! -- the parent component listens for the transdata method triggered by the child component, and calls its own transdata method -- >
    <! -- Mark subcomponents with ref -- >
    <children ref="child" @transData="transData"></children>
  </div>
</template>

<script>
import Children from './children.vue'
export default {
  data () {
    return {
      msg: 'hello, children'
    }
  },
  methods: {
      getData(){
          //Call the GetData method of the subcomponent
          this.$refs.child.getData();
      },
      //Parameters are the data passed by subcomponents
      transData(msg){
          console.log(msg) // hello, parent
      }
  },

  //Introduce subcomponents
  components:{
      children: Children
  }
}
</script>

Sub components

<template>
  <div class="hello">
    <div class="children" >
      I am a subcomponent
      <div>
        Data of subcomponent: {{childrensay}}}
      </div>
    </div>

  </div>
</template>

<script>

  export default {
      data () {
        return {
            childrenSay: 'hello, parent'
        }
      },
      methods: {
          //The child component triggers the function defined in the parent component through the emit method, thus passing the data in the child component to the parent component
          getData() {
              this.$emit('transData' , this.childrenSay);
          }
      }
  }
</script>

Another way of thinking is the same, based on the flexible use of communicating with the father and the son.
Turn to praise is the biggest encouragement