首頁 > web前端 > js教程 > 主體

在vue中使用$emit時,父元件無法監聽到子元件的事件如何實現?

亚连
發布: 2018-06-04 14:17:57
原創
4073 人瀏覽過

下面我就為大家分享一篇vue使用$emit時,父元件無法監聽到子元件的事件實例,具有很好的參考價值,希望對大家有所幫助。

vue使用$emit時,父元件無法監聽到子元件的事件的原因是$emit傳入的事件名稱只能使用小寫,不能使用大寫的駝峰規則來命名

<p 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>
 </p>
 <script>
  Vue.component(&#39;button-counter&#39;, {
   template: &#39;<button v-on:click="increment">{{ counter }}</button>&#39;,
   data: function () {
    return {
     counter: 0
    }
   },
   methods: {
    increment: function () {
     this.counter += 1
     this.$emit(&#39;ee&#39;, this.counter);//有效
     this.$emit(&#39;eEvent&#39;, this.counter);//无效,不能使用大写的驼峰规则命名
    }
   },
  })
  new Vue({
   el: &#39;#counter-event-example&#39;,
   data: {
    total: &#39;点击下面的按钮&#39;
   },
   methods: {
    incrementTotal: function (b) {
     this.total = b;
    }
   }
  })
 </script>
登入後複製

上面是我整理給大家的,希望今後對大家有幫助。

相關文章:

透過jQuery JSONP中跨域請求的方法(詳細教學)

在Vue中詳細解讀method與computed的區別(詳細教學)

透過在Vue2.0實現http請求以及loading展示

以上是在vue中使用$emit時,父元件無法監聽到子元件的事件如何實現?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板