vue中$refs、$emit、$on、$offの使用詳細


1.$refsの使用シーン
親コンポーネントがサブコンポーネントを呼び出す方法は、データを転送することができます。
親コンポーネント:

<div id="app">
  <child-a ref="child"></child-a>
  <button @click="getMyEvent">     </button>
<div>

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

サブコンポーネント:

<template>
  <button>   </button>
</template>
<script>
  export default{
    methods:{
      emitEvent(msg){
        console.log('     ------'+msg)
      }
    }
  }
</script>
2.$emitの使用
サブコンポーネントは、親コンポーネントの方法を呼び出して、データを転送します。
サブコンポーネント:

<template>
  <button @click="emitEvent">   </button>
</template>
<script>
  export default{
    data(){
      return{
        msg:'        '
      }
    },
    methods:{
      emitEvent(){
        //             ,   $emit    my-event      ,  this.msg  。
        this.$emit('my-event',this.msg)
      }
    }
  }
</script>
親コンポーネント:

<template>  
  <div id="app">
    <child-a @my-event="getMyEvent"></child-a>
    //       my-event        ,              。
  </div>
</template>
<script>
  import childA from './child.vue';
  export default {
    components:{
      childA
    },
    methods:{
      getMyEvent(msg){
       console.log('    ---'+msg);
       //    ,        
      }
    }
  }
</script>
3.$onの使用シーン
兄弟構成要素の間でデータをやりとりする。
まず、Vueの空白事例(兄弟セットの橋)を作成します。

import Vue from 'vue';
export default new Vue();
サブコンポーネントA:送信して$emitカスタムイベントを使ってデータを持って行きます。

<template>
  <div>
    <span>A  -{{msg}}</span>
    <input type="button" value=" A       B" @click="send">
  </div>
</template>
<script>
  import eventBus from './eventBus';
  export default{
    data(){
      return{
        msg:{
          a:'111',
          b:'222'
        }
      }
    },
    methods:{
      send(){
        eventBus.$emit('aevent',this.msg)
      }
    }
  }
</script>
サブアセンブリB:受信者は$onでカスタムイベントのcalbackを傍受してデータを受信する。

<template>
  <div>
    <span>B  ,A     --{{msg}}</span>
  </div>
</template>
<script>
  import eventBus from './eventBus.vue'
  export default {
    data(){
      return{
        msg:''
      }
    },
    mounted(){
      eventBus.$on('aevent',(val)=>{//    aevent,           。
        console.log(val);//    ;  a     。
      })
    }
  }
</script>
親コンポーネント:

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

以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。