zoukankan      html  css  js  c++  java
  • Vue自定义事件,$on(eventName) 监听事件,$emit(eventName) 触发事件

    <!--自定义事件
    使用 $on(eventName) 监听事件
    使用 $emit(eventName) 触发事件-->
    <div id="app15">
        <div id="counter-event-example">
          <p>{{ total }}</p>
          <button-counter></button-counter>
          <button-counter v-on:increment="incrementTotal"></button-counter>
        </div>
    </div>
    
    <script>
    Vue.component('button-counter', {
      template: '<button v-on:click="incrementHandler">{{ counter }}</button>',
      data: function () {
        return {
          counter: 0
        }
      },
      methods: {
        incrementHandler: function () {
          this.counter += 1
          this.$emit('increment')
        }
      },
    })
    new Vue({
      el: '#counter-event-example',
      data: {
        total: 0
      },
      methods: {
        incrementTotal: function () {
          this.total += 1
        }
      }
    })
    </script>

    怎么来看上面的触发事件$emit(eventName)呢。

    1.Vue.component注册了一个组件,名称叫button-counter,template中是组件内容,data中定义一个方法返回counter。

    2.methods中定义的一个方法,incrementHandler是方法的名称,而方法中this.$emit('increment')是触发了increment对应v-on:increment。

    3.v-on:increment又执行了方法incrementTotal,所以才能点击的时候Total才会跟着加。而第一个按钮就没执行v-on:increment,所以Total不变。

  • 相关阅读:
    automatic preferred max layout width
    UIActivityIndicatorView
    collectionview不能拖动
    消除找不到文件路径的警告
    保存图片到本地和相册
    svn上传.a文件
    UILabel copyWithZone:]: unrecognized selector sent to instance 0x7fd662d8f9b0
    NSString NSURL
    iOS 定位功能
    前端实现左右翻页功能Demo
  • 原文地址:https://www.cnblogs.com/feipengting/p/10401638.html
Copyright © 2011-2022 走看看