快捷導(dǎo)航

vue使用$emit時(shí),父組件無法監(jiān)聽到子組件的事件實(shí)例

更新時(shí)間：2018年02月26日 14:55:44 作者：楓似

下面小編就為大家分享一篇vue使用$emit時(shí),父組件無法監(jiān)聽到子組件的事件實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧

vue使用$emit時(shí)，父組件無法監(jiān)聽到子組件的事件的原因是$emit傳入的事件名稱只能使用小寫，不能使用大寫的駝峰規(guī)則命名

<div id="counter-event-example">
  <p>{{ total }}</p>
  <button-counter v-on:ee="incrementTotal"></button-counter>
  <button-counter v-on:eEvent="incrementTotal"></button-counter>
  <child ref="cmpSelect" v-on:ee="incrementTotal" option-api-url="/api/admin/cms/cmsCategory/getOptions.do"></child>
 </div>
 <script>
  Vue.component('button-counter', {
   template: '<button v-on:click="increment">{{ counter }}</button>',
   data: function () {
    return {
     counter: 0
    }
   },
   methods: {
    increment: function () {
     this.counter += 1
     this.$emit('ee', this.counter);//有效
     this.$emit('eEvent', this.counter);//無效，不能使用大寫的駝峰規(guī)則命名
    }
   },
  })
  new Vue({
   el: '#counter-event-example',
   data: {
    total: '點(diǎn)擊下面的按鈕'
   },
   methods: {
    incrementTotal: function (b) {
     this.total = b;
    }
   }
  })
 </script>

以上這篇vue使用$emit時(shí),父組件無法監(jiān)聽到子組件的事件實(shí)例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

在Vue中使用deep深度選擇器修改element UI組件的樣式
這篇文章主要介紹了在Vue中使用deep深度選擇器修改element UI組件的樣式，本文分為兩種方法給大家介紹，在這小編比較推薦使用第二種使用 deep 深度選擇器，感興趣的朋友跟隨小編一起看看吧
2022-12-12
vue+element實(shí)現(xiàn)打印頁面功能
這篇文章主要介紹了vue+element實(shí)現(xiàn)打印頁面功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下
2019-05-05
vue語法之render函數(shù)和jsx的基本使用
這篇文章主要介紹了vue語法之render函數(shù)和jsx的基本使用,在Vue中是支持jsx的,凡是我們是比較少在Vue中使用jsx的,jsx在react中使用的更加廣泛,因此在這里我簡單介紹一下jsx的基本使用，需要的朋友可以參考下
2022-08-08
Vue3?響應(yīng)式高階用法之customRef()的使用
customRef()是Vue3的高級(jí)工具,允許開發(fā)者創(chuàng)建具有復(fù)雜依賴跟蹤和自定義更新邏輯的ref對象,本文詳細(xì)介紹了customRef()的使用場景、基本用法、功能詳解以及最佳實(shí)踐,包括防抖、異步更新等用例,旨在幫助開發(fā)者更好地理解和使用這一強(qiáng)大功能
2024-09-09
VUE學(xué)習(xí)寶典之vue-dialog使用方法
在Vue中dialog對話框是一種常見的組件,用于在用戶與應(yīng)用程序進(jìn)行交互時(shí)顯示信息或收集輸入,這篇文章主要給大家介紹了關(guān)于VUE學(xué)習(xí)寶典之vue-dialog使用方法的相關(guān)資料,需要的朋友可以參考下
2024-05-05
Vue中router-view和component :is的區(qū)別解析
這篇文章主要介紹了Vue中router-view和component :is的區(qū)別解析,router-view用法直接填寫跳轉(zhuǎn)路由,路由組件會(huì)渲染<router-view></router-view>標(biāo)簽,本文給大家介紹的非常詳細(xì),需要的朋友可以參考下
2023-10-10
講解vue-router之什么是編程式路由
編程式路由在我們的項(xiàng)目使用過程中最常用的的方法了。這篇文章主要介紹了講解vue-router之什么是編程式路由，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-05-05
Vue實(shí)例創(chuàng)建和掛載的詳細(xì)過程
在 Vue.js 中,實(shí)例的掛載是一個(gè)非常重要的過程,它決定了 Vue 實(shí)例如何與 DOM 進(jìn)行交互,通過分析 Vue 源碼,特別是 Vue 的構(gòu)建函數(shù)和生命周期,我們可以了解掛載過程的詳細(xì)步驟,需要的朋友可以參考下
2024-11-11
解決Vue-cli3沒有vue.config.js文件夾及配置vue項(xiàng)目域名的問題
這篇文章主要介紹了解決Vue-cli3沒有vue.config.js文件夾及配置vue項(xiàng)目域名的問題，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2020-12-12
Vue3如何自定義v-permission權(quán)限指令
這篇文章主要為大家詳細(xì)介紹了Vue3如何編寫一個(gè)?v-permission?指令來根據(jù)用戶權(quán)限動(dòng)態(tài)控制元素的渲染,感興趣的小伙伴可以參考一下
2024-12-12