current position:Home>Vue parent-child component mutual transmission and intermodulation

Vue parent-child component mutual transmission and intermodulation

2022-04-29 08:50:28囍囍囍囍囍囍囍囍囍囍 A

  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 "";
     },
   },
 },
  1. 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;
  },
  1. Parent component calls child component
<UEditor :content="content" ref="mychild"></UEditor>
//childHandleclick()  Subcomponent methods 
this.$refs.mychild.childHandleclick();
  1. The child component calls the parent component
//parentHandleclick()  Parent component method 
this.$parent.parentHandleclick();
  1. 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>

copyright notice
author[囍囍囍囍囍囍囍囍囍囍 A],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/119/202204290621251317.html