vue$emit、$on、$refsの概要

1、$emit
現在のインスタンスのイベントをトリガーします.追加のパラメータはリスナーコールバックに渡されます
ex:サブコンポーネントが親コンポーネントのメソッドを呼び出し、データを渡す注意:サブコンポーネントラベルの時間も大文字と小文字を区別せずに「-」で区切る
サブアセンブリ:
 

  export default {
    data() {
      return {
        msg: "         "
      }
    },
    methods: {
      emitEvent(){
        this.$emit('my-event', this.msg)
        //             ，   $emit    my-event      ，  this.msg  。
      }
    }
  }

 
親コンポーネント:
 

  import ChildA from './components/child.vue'
  export default {
    components: {
      ChildA
    },
    methods: {
      getMyEvent(msg){
          console.log('     --------->'+msg)//     --------->         
      }
    }
  }

 
 
2、$on
兄弟コンポーネント間でデータを転送
まずvueの空白のインスタンス(兄弟間のブリッジ)を作成します.

 import Vue from 'vue'
 export default new Vue()

サブアセンブリchild_a
送信者は$emitカスタムイベントを使用してデータを送信します.

import vmson from "../util/emptyVue"
export default {
data(){
return {
msg:{
a:'111',
b:'222'
}
}
},
methods:{
send:function(){
vmson.$emit("aevent",this.msg)
}
}
}

サブアセンブリchild_b
受信者は$onでカスタムイベントのcallbackを傍受してデータを受信する
 

      import vmson from "../util/emptyVue"
      export default {
         data(){
                return {
                    msg:""
                }
            },
         mounted(){
                vmson.$on("aevent",(val)=>{//    aevent，           ;
                    console.log(val);//    ：  a     
                    this.msg = val;
                })
          }
    }

 
親コンポーネント:

   import childa from './childa.vue';
   import childb from './childb.vue';
   export default {
       components:{
           childa,
           childb
       },
       data(){
           return {
               msg:""
           }
       },
       methods:{
           
       }
   }

 
 
3、$refs
親コンポーネントがサブコンポーネントを呼び出す方法で、データを渡すことができます注意:サブコンポーネントラベルのイベントも大文字と小文字を区別せずに「-」で区切る
親コンポーネント:

import ChildA from './components/child.vue'
export default {
components: {
ChildA
},
data() {
return {
msg: "         "
}
},
methods: {
getMyEvent(){
this.$refs.child.emitEvent(this.msg);
//        ，child   ref    ，emitEvent       。
}
}
}

 
サブアセンブリ:
 

  export default {
    methods: {
      emitEvent(msg){
        console.log('     --------->'+msg)//     --------->         
      }
    }
  }