main.js文件添加如下:

new Vue({
router,
render: h => h(App),
data: {
eventHub: new Vue()
}
}).$mount('#app');

父组件:

监听事件:

this.$root.eventHub.$on('cart.add', (target) => {
this._drop(target);
});

子组件:

触发事件:

this.$root.eventHub.$emit('cart.add', event.target);

vue2.0:子组件调用父组件的更多相关文章

  1. vue 子组件调用父组件的方法

    vue中 父子组件的通信: 子组件通过 props: { //子组件中写的. childMsg: { //字段名 type: Array,//类型 default: [0,0,0] //这样可以指定默 ...

  2. Vue 子组件调用父组件 $emit

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

  3. Vue子组件调用父组件的方法

    Vue子组件调用父组件的方法   Vue中子组件调用父组件的方法,这里有三种方法提供参考 第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法 父组件 <temp ...

  4. React篇-子组件调用父组件方法,并传值

    react 中子组件调用父组件的方法,通过props: 父组件: isNote(data){} <div className="tabC01"> <FTab ta ...

  5. vue 子组件调用父组件的函数

    子组件调用父组件的函数,使用$emit(eventName,[...args]),触发当前实例上的事件.附加参数都会传给监听器回调. 子组件 <template> <div> ...

  6. react typescript 子组件调用父组件

    //父组件 import * as React from 'react'import { Input } from 'antd'const Search = Input.Searchimport &q ...

  7. Vue中子组件调用父组件的方法

    Vue中子组件调用父组件的方法 相关Html: <!DOCTYPE html> <html lang="en"> <head> <meta ...

  8. Vue 子组件调用父组件方法

    父组件内容: <template> <div> <info-wnd ref="infoWnd" @parentClick="wndClick ...

  9. react 子组件调用父组件方法

    import React from 'react'import '../page1/header.css'import { Table } from 'antd'import Child from ' ...

  10. react 父组件调用子组件方法、子组件调用父组件方法

    我们闲话不多说,直接上代码 // 父组件 import React, {Component} from 'react'; class Parents extends Component { const ...

随机推荐

  1. 系统启动时,BIOS与影子内存_5

    问题:“当我们按下电源开关时,电源开始供电,芯片组撤去RESET信号,CPU马上就从地址FFFF0H处开始执行指令,这个地址在系统BIOS的地址范围内,无论是Award BIOS还是AMI BIOS, ...

  2. Spark Mllib里的分层抽样(使用map作为分层抽样的数据标记)

    不多说,直接上干货! 具体,见 Spark Mllib机器学习实战的第4章 Mllib基本数据类型和Mllib数理统计

  3. 【Java密码学】使用Bouncy Castle生成数字签名、数字信封

    Bouncy Castle(轻量级密码术包)是一种用于 Java 平台的开放源码的轻量级密码术包,它支持大量的密码术算法,并提供 JCE 1.2.1 的实现.最近项目上正好用到了Bouncy Cast ...

  4. Windows安全认证是如何进行的?[NTLM篇]

    <上篇>中我们介绍Kerberos认证的整个流程.在允许的环境下,Kerberos是首选的认证方式.在这之前,Windows主要采用另一种认证协议——NTLM(NT Lan Manager ...

  5. jQuery 结构的实现思路

    前提: 使用 JS 创建对象的最优办法,是 原型模式.   step1: 原型模式的基础使用方式     function fn(){}     fn.prototype = {}       var ...

  6. Ini文件格式说明

    http://www.cnblogs.com/CUIT-DX037/ 百度百科介绍:ini 文件是Initialization File的缩写,即初始化文件,是windows的系统配置文件所采用的存储 ...

  7. 关于小程序后台post不到数据的问题

    小程序post请求获取不到数据问题 把headers的参数“Content-Type”的值改为application/x-www-form-urlencoded: Request Body Type ...

  8. weex 项目开发 weexpack 项目 打包、签名、发布

    一. weexpack build android  和  weexpack run android 的 区别. (1)单纯打包 weexpack build android (2)打包并运行 wee ...

  9. AI software can catch shoplifters before they steal

    日本研发出智能软件 不等下手就能识别小偷 AI software can catch shoplifters before they steal 在汤姆·克鲁斯主演的电影<少数派报告>中, ...

  10. 软件License设计

    如何保护软件版权,最常用的办法就是设计一套license验证框架. 1.我们的常规需求如下: .可以限制软件只能在一台机器上使用: 目前很多软件都是一机一码的销售,软件换一台机器则不能使用,想要几台机 ...