vue2.0 中#$emit,$on的使用詳解

更新時間：2017年06月07日 15:03:16 作者：m0_37068028

這篇文章主要介紹了vue2.0 中#$emit,$on的使用詳解,需要的朋友可以參考下

vue1.0中 vm.$dispatch 和 vm.$broadcast 被棄用，改用$emit,$on

vm.$on( event, callback )

監(jiān)聽當前實例上的自定義事件。事件可以由vm.$emit觸發(fā)?；卣{函數(shù)會接收所有傳入事件觸發(fā)函數(shù)的額外參數(shù)。

vm.$emit( event, […args] )

觸發(fā)當前實例上的事件。附加參數(shù)都會傳給監(jiān)聽器回調。

例子：

//父組件
<template>
  <ratingselect @select-type="onSelectType"></ratingselect>
</template>
<script>
  data () {
   return {
    selectType: 0,
  },
  methods: {
   onSelectType (type) {
    this.selectType = type
   }
  }
</script>

父組件使用@select-type="onSelectType"@就是v-on的簡寫，監(jiān)聽由子組件vm.$emit觸發(fā)的事件，通過onSelectType()接受從子組件傳遞過來的數(shù)據(jù)，通知父組件數(shù)據(jù)改變了。

// 子組件
<template>
 <div>
  <span @click="select(0, $event)" :class="{'active': selectType===0}"></span>
  <span @click="select(1, $event)" :class="{'active': selectType===1}"></span>
  <span @click="select(2, $event)" :class="{'active': selectType===2}"></span>
 </div>
</template>
<script>
  data () {
   return {
    selectType: 0,
  },
  methods: {
    select (type, event) {
      this.selectType = type
      this.$emit('select-type', type)
   }
  }
</script>

子組件通過$emit來觸發(fā)事件，將參數(shù)傳遞出去。

以上所述是小編給大家介紹的vue2.0 中#$emit,$on的使用詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

vue中的數(shù)字滾動和翻牌器
這篇文章主要介紹了vue中的數(shù)字滾動和翻牌器,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-10-10
Vue?elementui如何實現(xiàn)表格selection的默認勾選
這篇文章主要介紹了Vue?elementui如何實現(xiàn)表格selection的默認勾選問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-06-06
深入探討Vue計算屬性與監(jiān)聽器的區(qū)別和用途
在Vue的開發(fā)中,計算屬性（Computed Properties）和監(jiān)聽器（Watchers）是兩種非常重要的概念,它們都用于響應式地處理數(shù)據(jù)變化,本文將帶你深入了解計算屬性和監(jiān)聽器的區(qū)別,以及在何時使用它們,感興趣的朋友可以參考下
2023-09-09
Vue2.x中的Render函數(shù)詳解
通常開發(fā)vue我們使用的是模板語法，其實還有和react相同的語法，那就是render函數(shù)，同樣支持jsx語法。Vue 的模板實際是編譯成了 render 函數(shù)。
2017-05-05
解決vue v-for 遍歷循環(huán)時key值報錯的問題
今天小編就為大家分享一篇解決vue v-for 遍歷循環(huán)時key值報錯的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
vue項目動態(tài)設置頁面title及是否緩存頁面的問題
這篇文章主要介紹了vue項目動態(tài)設置頁面title及是否緩存頁面的問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-11-11
詳解element上傳組件before-remove鉤子問題解決
這篇文章主要介紹了詳解element上傳組件before-remove鉤子問題解決，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-04-04
Node.js使用orm2進行update操作時關聯(lián)字段無法修改的解決方法
這篇文章主要給大家介紹了Node.js使用orm2進行update操作時關聯(lián)字段無法修改的解決方法，文中給出了詳細的示例代碼供大家參考學習，對大家具有一定的參考學習價值，需要的朋友們下面來一起看看吧。
2017-06-06
vue多頁面項目中路由使用history模式的方法
這篇文章主要介紹了vue多頁面項目中路由如何使用history模式，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下
2019-09-09
vue項目前端微信JSAPI與外部H5支付相關實現(xiàn)過程及常見問題
這篇文章主要介紹了vue項目前端微信JSAPI與外部H5支付相關實現(xiàn)過程及常見問題，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-04-04