Vue child-parent assembly method intermodulation

Speak dry, not long-winded, we do vue development process often encountered in case you need to call the parent component sub-assembly or sub-assembly method needs to call the parent component of the method is to do a few concluding, I want to help.

 

Call the parent component sub-assembly method:

1. Set subassembly REF , parent component bythis.$refs.xxx.method_name(data)调用子组件方法，data参数可选

Parent component:

<template>
  <div>
　　<h1>我是父组件</h1>
    <child ref="childname"></child>
  </div>
</template>
<script>
  import child from '~/components/child';
  export default {
    components: {
      child
    },
    methods: {
      fatherMethod(data) 
        this.$refs.childname.childMethod(data);
        console.log('调用子组件方法');
      }
    }
  };
</script>        

 Subassembly:

<Template> 
  <div> 
    <h1 of> I was sub-assembly </ h1 of> 
  </ div> 
</ Template> 
<Script> 
  Export default { 
    Methods: { 
      childMethod (Data) { 
      　　the console.log ( 'I sub-assembly method' ) 
      } 
    } 
  };
 </ Script>

 

Call the parent component sub-assembly method:

1. In the subassembly by this. $ Parent.event method to call the parent component, Data are optional

Parent component:

<Template> 
  <div>     
    <h1 of> I parent element </ h1 of> 
    <Child> </ Child> 
  </ div> 
</ Template> 
<Script> 
  Import Child from '~ / Components / Child' ; 
  Export default { 
    Components : { 
      Child 
    }, 
    methods: { 
      fatherMethod (Data) { 
        the console.log ( 'parent element method I' ); 
      } 
    } 
  };
 </ Script>

 Subassembly:

<Template> 
  <div> 
    <h1> I am a subcomponent </ h1> 
    <the Button @ the Click = "childMethod (the Data)"> Click </ the Button> 
  </ div> 
</ Template> 
<Script> 
  Export default { 
    Methods: { 
      childMethod () { 
        the this $ parent.fatherMethod (Data);. 
        the console.log ( 'call parent element method' ) 
      } 
    } 
  };
 </ Script>

2. In the sub-assemblies used in $emita trigger event to a parent component, the parent component listens to this event, the Data parameter optional

Parent component:

<template>
  <div>    
    <h1>我是父组件</h1>
    <child @fatherMethod="fatherMethod"></child>
  </div>
</template>
<script>
  import child from '~/components/child';
  export default {
    components: {
      child
    },
    methods: {
      fatherMethod(data) {
        console.log('我是父组件方法');
      }
    }
  };
</script>

Subassembly:

<Template> 
  <div> 
    <h1> I am a subcomponent </ h1> 
    <the Button @ the Click = "childMethod (the Data)"> Click </ the Button> 
  </ div> 
</ Template> 
<Script> 
  Export default { 
    Methods: { 
      childMethod (Data) { 
       the this $ EMIT ( 'fatherMethod'. , Data); 
        the console.log ( 'call parent element method' ) 
      } 
    } 
  };
 </ Script>

 3. The parent component by props the incoming sub-assembly method, the subassemblies in directly call this method, the Data parameter optional

Parent component:

<template>
  <div>    
    <h1>我是父组件</h1>
    <child :fatherMethod="fatherMethod"></child>
  </div>
</template>
<script>
  import child from '~/components/child';
  export default {
    components: {
      child
    },
    methods: {
      fatherMethod(data) {
        console.log('我是父组件方法');
      }
    }
  };
</script>

Subassembly:

<Template> 
  <div> 
    <h1> I am a subcomponent </ h1> 
    <the Button @ the Click = "childMethod (the Data)"> Click </ the Button> 
  </ div> 
</ Template> 
<Script> 
  Export default { 
    props: { 
      fatherMethod: { 
        type: Function, 
        default : null 
      } 
    }, 
    methods: { 
      childMethod (Data) { 
        IF ( the this .fatherMethod) {
           the this .fatherMethod (Data); 
　　　　　　the console.log ( 'call transfer method of the parent component') 
        }    
      } 
    } 
  };
 </ Script>

 

Other calling methods:

1. Because all components will eventually rendered into real Dom elements, or it can be js jquery, acquire Dom element objects, methods, elements bound by means of simulation clicks triggered by local Cookie, localStorage or do sessionStorage cache parameters to achieve passed by value. This method is not limited to child parent component, as long as the components on the same page can be used, but because they do not meet the specifications vue, not a special case is not recommended

Component A:

<Template> 
  <div>     
    <h1 of> I component A </ h1 of> 
    <Button ID = 'BTN' @ the Click = 'methodA ()'> Point I </ Button> 
  </ div> 
</ Template> 
<Script> 
  Export default { 
    methods: { 
      methodA () { 
　　　　　var localStorage.getItem Parameter = ( 'Parameter' );  
        the console.log ( 'A method of assembly I' ); 
      } 
    } 
  };
 </ Script>

Component B:

<Template> 
  <div>     
    <h1 of> I component B </ h1 of> 
    <Button @ the Click = 'methodB (Data)'> Point I </ Button> 
  </ div> 
</ Template> 
<Script> 
  Export default { 
    Methods : { 
      methodB (Data) { 
　　  　　localStorage.setItem ( 'Parameter' , Data); 
       　$ ( '#btn') the click ();. // simulated button clicks 
       　the console.log ( 'simulate a click button, a trigger assembly method A' ) ; 
      } 
    } 
  };
 </ Script>

  

 Limited capacity, the general level, mistakes, please correct me, thanks to the attention and comment!