zoukankan      html  css  js  c++  java
  • Vue组件绑定自定义事件

    Vue组件使用v-on绑定自定义事件:
      可以分为3步理解:
        1.在组件模板中按照正常事件机制绑定事件:
          template: '<button v-on:click="increment">{{ counter }}</button>',
          如上,v-on:click就是用来给子组件绑定点击事件的,这就是原生的自带的事件,容易理解。
        2.子组件的事件发生时,在事件函数中向父组件“报告”这一事件(使用$emit):
          methods: {
            increment: function () {
              this.counter += 1;
              this.$emit('increment');
            }
          },
          上面事件函数中的代码this.$emit('increment')的意思就是向父组件报告,自己发生了‘increment’事件。至于发生的事件叫什么名字,可以随意取名,只要在父组件中绑定时名称一致即可。
        3.父组件在使用时,明确使用v-on绑定子组件传来的事件:
          <button-counter v-on:increment="incrementTotal"></button-counter>
          上方的v-on:increment就是绑定的子组件的increment事件。
          常用语父组件中的数据变化与子组件的操作有关的情况。

  • 相关阅读:
    软工个人项目作业
    软工个人博客作业(2)
    软工第一次作业-热身
    OO第四单元
    OO第三单元
    OO第二单元总结
    面向对象UML单元总结及课程总结
    JML单元总结
    面向对象设计与构造第二单元总结
    OO第一单元小结
  • 原文地址:https://www.cnblogs.com/DM428/p/7066176.html
Copyright © 2011-2022 走看看