vue in $ refs, $ emit, $ on usage scenarios

1. $ emit usage scenarios

Call the parent component subassembly and method of communicating data

Note: The time sub-element tag is not case-sensitive use "-" separated

Subassembly:

<Template> 
  <Button @ the Click = " emitEvent " > Click I </ Button> 
</ Template> 
<Script> 
  Export default { 
    Data () { 
      return { 
        MSG: " I Data subassembly " 
      } 
    }, 
    Methods: { 
      emitEvent () { 
        the this . $ EMIT ( ' my-event ' , the this a .msg)
         // by clicking a button event triggering method, and a method of triggering a custom my-event with $ EMIT, 
transfer this.msg data. 
      } 
    } 
  }
 </ Script>

Parent component:

<Template> 
  <div ID = " App " > 
    <Child-A @ MY- Event = " getMyEvent " > </ Child-A> 
    <-! performed by a method of monitoring the parent component my-event event, and then to take the value of the passed subassembly -> 
  </ div> 
</ Template> 
<Script> 
  Import ChildA from  ' ./components/child.vue ' 
  Export default { 
    components: { 
      ChildA 
    }, 
    Methods: { 
      getMyEvent (MSG) { 
          the console.log ( ' received data ---------> 'msg +) // data received ---------> I data sub-assemblies
      }
    }
  }
</script>

2, using $ ref scene

The method calls the parent component subassembly, data can be transferred

Note: The time sub-element tag is not case-sensitive use "-" separated

Parent component:

<template>
  <div id="app">
    <child-a ref="child"></child-a>
    <!--用ref给子组件起个名字-->
    <button @click="getMyEvent">点击父组件</button>
  </div>
</template>
<script>
  import ChildA from './components/child.vue'
  export default {
    components: {
      ChildA
    },
    data() {
      return {
        msg: "
    },"I am a parent data components
      } 
    Methods: { 
      getMyEvent () { 
          the this . $ Refs.child.emitEvent ( the this a .msg);
           // method call subassembly, child is the upper ref from the name, emitEvent method subassembly. 
      } 
    } 
  }
 </ Script>

Subassembly:

<Template> 
  <Button> click I </ Button> 
</ Template> 
<Script> 
  Export default { 
    Methods: { 
      emitEvent (MSG) { 
        the console.log ( ' received data ---------> ' + MSG) // data received ---------> I component is the parent data 
      } 
    } 
  }
 </ Script>

3. $ on usage scenarios

Mutual transfer of data between components brothers

• First, create a blank instance of a vue (bridge between the brothers)

  Import View from  ' for ' 
        export default  new View ()

   

• Subassemblies childa

<template>
    <div>
        <span>A组件->{{msg}}</span>
        <input type="button" value="把a组件数据传给b" @click ="send">
    </div>
</template>
<script>
import vmson from "../../../util/emptyVue"
export default {
    data(){
        return {
            msg:{
                a:'111',
                b:'222'
            }
        }
    },
    methods:{
        send:function(){
            vmson.$emit("aevent",this.msg)
        }
    }
}
</script>

•       Subassemblies childb

The recipient by $ on listening custom event callback receives data

<Template> 
 <div> 
    data <span> b component, a pass is -> {{MSG}} </ span> 
 </ div> 
</ Template> 
<Script> 
      Import vmson from  " ../../ ../util/emptyVue " 
      Export default { 
         the Data () { 
                return { 
                    msg: " " 
                } 
            }, 
         Mounted () { 
                vmson $ ON (. " the aevent " , (Val) => { // listen for events aevent, the callback function to use the arrow functions; 
                    console.log (Val); // print the results: I am a data component of 
                    the this .msg =msg = val;
                })
          }
    }
</script>

• Parent component

<template>
     <div>
      <childa></childa>    
      <br />
      <childb></childb>      
     </div>
</template>
<script>
   import childa from './childa.vue';
   import childb from './childb.vue';
   export default {
       components:{
           childa,
           childb
       },
       data(){
           return {
               msg:""
           }
       },
       methods:{
           
       }
   }
</script>