vue中$refs, $emit, $on, $once, $off的使用詳解

這篇文章主要介紹了vue中$refs, $emit, $on, $once, $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監聽自定義事件的callback接收數據

<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>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持神馬文庫。