快捷導(dǎo)航

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ā)?；卣{(diào)函數(shù)會接收所有傳入事件觸發(fā)函數(shù)的額外參數(shù)。

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

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

例子：

//父組件
<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的使用詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

詳解vue 2.6 中 slot 的新用法
對插槽的這種改變讓我對發(fā)現(xiàn)插槽的潛在功能感興趣，以便為我們基于Vue的項目提供可重用性，新功能和更清晰的可讀性。這篇文章主要介紹了vue 2.6 中 slot 的新用法,需要的朋友可以參考下
2019-07-07
詳解Vue3怎么使用element-plus
本文主要介紹了Vue3怎么使用element-plus，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-11-11
Vue中使用Scss實現(xiàn)配置、切換主題方式
這篇文章主要介紹了Vue中使用Scss實現(xiàn)配置、切換主題方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-03-03
Vue3?setup?的作用實例詳解
setup?用來寫組合式?API，從生命周期的角度，相當于取代了?beforeCreate()，這篇文章主要介紹了Vue3?setup?的作用,需要的朋友可以參考下
2022-12-12
Vue生命周期詳解
本文詳細講解了Vue的生命周期，文中通過示例代碼介紹的非常詳細。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-06-06
Vue開發(fā)指南之重點知識梳理
這篇文章主要介紹了Vue開發(fā)指南之重點知識梳理，對Vue框架感興趣的同學(xué)，可以參考下
2021-05-05
Echarts+VUE柱狀圖繪制細節(jié)并且屏幕自適應(yīng)完整代碼
柱狀圖(或稱條形圖)是一種通過柱形的長度來表現(xiàn)數(shù)據(jù)大小的一種常用圖表類型,這篇文章主要給大家介紹了關(guān)于Echarts+VUE柱狀圖繪制細節(jié)并且屏幕自適應(yīng)的相關(guān)資料,需要的朋友可以參考下
2024-02-02
Vue中div contenteditable 的光標定位方法
今天小編就為大家分享一篇Vue中div contenteditable 的光標定位方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-08-08
Vue中使用及封裝websocket示例詳解
這篇文章主要為大家介紹了Vue中使用及封裝websocket示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-07-07
Vue 單文件中的數(shù)據(jù)傳遞示例
本篇文章主要介紹了Vue 單文件中的數(shù)據(jù)傳遞示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-03-03