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. django允许跨域请求配置

    django允许跨域请求配置 下载corsheader pip install django-cors-headers 修改setting.py中配置 在INSTALLED_APPS中增加corshe ...

  2. Druid SQL 解析器概览

    概览 Druid 的官方 wiki 对 SQL 解析器部分的讲解内容并不多,但虽然不多,也有利于完全没接触过 Druid 的人对 SQL 解析器有个初步的印象. 说到解析器,脑海里便很容易浮现 par ...

  3. 有标号的DAG计数 III

    Description 给定一正整数n,对n个点有标号的有向无环图进行计数,这里加一个限制:此图必须是弱连通图.输出答案 mod 10007 的结果. Solution 弱连通图即把边变成无向之后成为 ...

  4. 系统对象的使用——Cookie,ViewState,Session,Application

    Normal 0 7.8 磅 0 2 false false false EN-US ZH-CN X-NONE /* Style Definitions */ table.MsoNormalTable ...

  5. 纯手写实现HashMap

    1.hashmap的实现 ① 初始化 1)定义一个Node<K, V>的数组来存放元素,但不立即初始化,在使用的时候再加载 2)定义数组初始大小为16 3)定义负载因子,默认为0.75, ...

  6. Spring学习笔记:面向切面编程AOP(Aspect Oriented Programming)

    一.面向切面编程AOP 目标:让我们可以“专心做事”,避免繁杂重复的功能编码 原理:将复杂的需求分解出不同方面,将公共功能集中解决 *****所谓面向切面编程,是一种通过预编译方式和运行期动态代理实现 ...

  7. linux系统下部署项目

    一.修改防火墙设置,开放对应的端口 修改Linux系统防火墙配置需要修改 /etc/sysconfig/iptables 这个文件,如果要开放哪个端口,在里面添加一条  -A RH-Firewall- ...

  8. 5、springboot之修改端口号

    在resources中加入application.properties文件,里面加入 servier.port = 端口号 访问的时候,就用localhost:端口号 完事

  9. Effective C++ .15,16获取原始资源和成对使用同类型new和delete

    15. 智能指针可以通过get操作 #include <iostream> #include <cstdlib> #include <memory> using n ...

  10. Hibernate 性能优化一对一关联映射

    概述: hibernate提供了两种映射一对一关联的方式:按照外键映射和按照主键映射. 下面以员工账号和员工档案为例 ,介绍两种映射方式,并使用这两种映射方式分别完成以下持久化操作: (1)保存员工档 ...