Vue parent-child component mutual transmission and intermodulation

1. The parent component passes the child component

 The parent component passes to the child component through prps
 Take a chestnut ：

 Parent component writing :content To transfer the contents of sub components 
<UEditor :content="content" ref="mychild"></UEditor>

 Subcomponent pass props receive 
props: {
    
   content: {
    
     type: String,
     default: function () {
    
       return "";
     },
   },
 },

2. Child component to parent component

 Subcomponent pass $emit Pass to parent component 
 Sub component writing ：
methods: {
    
    childHandleclick() {
    
      // getHandleContent()  Parent component method 
      this.$emit('getHandleContent',this.newContent)
    }
  },
   Parent component passed @getHandleContent="getHandleContent" receive 
   Parent component writing 
  <UEditor :content="content" ref="mychild" @getHandleContent="getHandleContent" ></UEditor>
  //  Parent component method 
  getHandleContent(content) {
    
  	// Receive the value returned by the sub component 
    this.content = content;
  },

3. Parent component calls child component

<UEditor :content="content" ref="mychild"></UEditor>
//childHandleclick()  Subcomponent methods 
this.$refs.mychild.childHandleclick();

4. The child component calls the parent component

//parentHandleclick()  Parent component method 
this.$parent.parentHandleclick();

5. The parent component passes the method to the child component , Subcomponents call directly
   Parent component

<template>
  <div>
    <child :fatherMethod="fatherMethod"></child>
  </div>
</template>
<script>
  import child from '~/components/dam/child';
  export default {
    
    components: {
    
      child
    },
    methods: {
    
      fatherMethod() {
    
        console.log(' test ');
      }
    }
  };
</script>

Child components

<template>
  <div>
    <button @click="childMethod()"> Click on </button>
  </div>
</template>
<script>
  export default {
    
    props: {
    
      fatherMethod: {
    
        type: Function,
        default: null
      }
    },
    methods: {
    
      childMethod() {
    
        if (this.fatherMethod) {
    
          this.fatherMethod();
        }
      }
    }
  };
</script>