Way communication between the assembly and the assembly vue

1. vue way communication between the assembly and the components?

Parent -> child prop

Child -> father and son by $ emit a self-defined event triggers. Father when calling this sub-assemblies, listen to this custom event

The following two can achieve, but it is cumbersome. We have a better way to an event called the central processor or vuex

Brother -> brother to be operated by father

Cousin -> cousin through Grandpa

There are some very, very specific use, generally not recommended:

1. $ root instance object can obtain the root component

2. $ parent Gets the parent component instance of an object

3. $ children get their subcomponents instance of a collection of objects []

4. $ refs get specific example of a subassembly or a particular real dom html elements. (Get this thing in a specific html element when used ...)

4.1 first need to mark. Components or html element you want to get, as defined in them a ref = "xxx"

4.2 then this. $ Refs.xxx

If the ref tag is ordinary html element, then by $ refs.xxx to get will be the object of this dom html element

If the flag ref is a sub-assembly. So by $ refs.xxx get will be the instance of the object subcomponents

 

// Code view Example 
<Script> 
      Vue.component ( " parent " , { 
        Data () { 
          return { 
            name: " Zhang three " 
          }; 
        }, 
        Template: `
           <div class = " parent " > 
            <h1 of REF = " BOX2 " > I am a parent, my name is {name}} {</ h1> 
          </ div> 
        `, 
        the Created () { 
          console.log ( the this $ Children.); 
        } 
      });


      VM the let = new new Vue ({ 
        EL: " #app " , 

        Data: { 
          name: " Zhang San " 
        }, 

        Template: `
           <div ID = " App "  class = " the root " > 
            <Button @ = the Click " Fn1 " > Get h1 real objects dom </ Button> 
            <h1 REF = " Box " > I ancestors, root component, my name is {name}} {</ h1> 
            <parent ref="box2"> </ parent> 
          </ div> 
        `, 

        Methods: { 
          Fn1 () { 
            // how to obtain this dom target current component h1 
            . 1 . 
            the console.log (document.getElementById ( " Box " )); // not recommended, it has side effects 
            2 . 
            console.log ( the this $ el.querySelector (. " #box " )); // can be used, there will be no side effects
             // 3. the most recommended way to 
            console.log ( the this $ refs. [ " Box " ]); 
            the console.log ( the this. $ refs.box2);
             // ? dom need to get to that target parent component h1 tag 
            console.log ( the this $ refs [. " BOX2 " ] $ el.querySelector (. " h1 " )); 
            console.log ( the this . refs $ [ " BOX2 " .] $ refs [ " BOX2 " ]); 
          } 
        } 
      });
     </ Script>