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事件。
      常用语父组件中的数据变化与子组件的操作有关的情况。

Vue组件绑定自定义事件的更多相关文章

  1. vue组件绑定原生事件

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. 【vue】vue组件的自定义事件

    父组件: <template> <div> <my-child abcClick="sayHello"></my-child> &l ...

  3. vue怎么给自定义组件绑定原生事件

     下面主要以4个示例Demo演示(示例代码JS引用的Vue CDN),建议小伙伴直接复制示例代码运行查看, 赶时间的小伙伴可直接往下拉,看示例demo4 注:全局或局部注册的组件称为子组件,其中声明的 ...

  4. 怎样在 Vue 里面使用自定义事件将子组件的数据传回给父组件?

    首先, Vue 里面的组件之间的数据流动是 单向 的, 数据可以从父组件传递给子组件, 但不能从子组件传递给父组件, 因为组件和组件之间是 隔离 的. 就像两个嵌套的 黑盒子 . 能通过 props ...

  5. vue子组件使用自定义事件向父组件传递数据

    使用v-on绑定自定义事件可以让子组件向父组件传递数据,用到了this.$emit(‘自定义的事件名称’,传递给父组件的数据) <!DOCTYPE html> <html lang= ...

  6. vue第八单元(组件通信 子父,父子组件通信 自定义事件 事件修饰符 v-model props验证 )

    第八单元(组件通信 子父,父子组件通信 自定义事件 事件修饰符 v-model props验证 ) #课程目标 掌握使用props让父组件给子组件传参(重点) 掌握props属性的使用以及prop验证 ...

  7. vue子组件的自定义事件

    父子组件的信息传递无碍就是父组件给子组件传值(props和$attrs)和父组件触发子组件的事件($emit) 之前已经谈过了父组件给子组件传值了,现在来说说父组件触发子组件的自定义事件吧-- 实际上 ...

  8. vue组件、自定义指令、路由

    1.vue组件 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的 ...

  9. Vue中调用另一个组件中自定义事件

    之前在一个场景中,遇到组件需要调用父组件中的方法tableInit(),字组件调用父组件常用的有三种方法,具体参考:https://www.cnblogs.com/jin-zhe/p/9523782. ...

随机推荐

  1. MySql的备份还原

    备份数据是数据库管理最常用的操作.为了保证数据库中数据的安全,数据管理员需要定期进行数据备份.一旦数据库遭到破坏,便可通过备份的文件来还原数据库.因此,数据备份是一项很重要的工作. 数据备份 使用my ...

  2. gihub简单学习 步步操作(简单易学)

    一:Git是什么? Git是目前世界上最先进的分布式版本控制系统. 二:SVN与Git的最主要的区别? SVN是集中式版本控制系统,版本库是集中放在中央服务器的,而干活的时候,用的都是自己的电脑,所以 ...

  3. vue+cordova项目

    教你用Cordova打包Vue项目   现在国内越来越多的开发者使用Vue开发混合app,但是当大家开发完成过后才发现不知道该怎么将Vue项目打包成app.据我现在的了解打包Vue项目目前流行的就是使 ...

  4. Java给树加子节点个数统计

    通过后台实现 private List<Photo> getChildren(Photo photo) { List<Photo> children = new ArrayLi ...

  5. JavaEE 7 最全教程集锦(转)

    转自 http://www.iteye.com/news/28009 甲骨文公司已经在6月份正式发布了JavaEE 7,该版本带来了诸多新的规范及特性,将企业级开发提升到了一个新的层次. Java E ...

  6. Full postback triggered by LinkButton inside GridView inside UpdatePanel

    GridView inside of a UpdatePanel,get the button to trigger a partial postback <asp:ScriptManager ...

  7. java向上转型的问题

    import java.util.Arrays;import java.util.HashSet;import java.util.Set;class A{ private String s1 = & ...

  8. Nexus-NuGet私有仓库服务搭建(一)

    搭建私有Nuget服务器的方式有很多,大多数人文章介绍在vs 中新建默认web项目,然后再Nuget 中安装 Nuget.Server,再部署到IIS 中即可.虽然能用,但是这种方式太过简陋,操作界面 ...

  9. mybatis笔记<二> 整合spring

    mybatis与spring整合需要添加几个jar包,mybatis-spring, spring-context, spring-jdbc 1. spring ioc只要一个jar包就ok 2. 我 ...

  10. Spring课程 Spring入门篇 6-3 ProxyFactoryBean及相关内容(下)

    1 解析 1.1 使用global advisors demo 1.2 jdk代理和cglib代理的选择 1.3 如何强制使用CGLIB实现AOP? 1.4 JDK动态代理和CGLIB字节码生成的区别 ...