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. scau 8616 汽车拉力比赛

          上次我们过了二分图的最佳匹配,现在我们看一道题目,经典的二分图的最佳匹配题目 8616 汽车拉力比赛 时间限制:500MS  内存限制:1000K提交次数:71 通过次数:24 题型: 编 ...

  2. 网络爬虫之记一次js逆向解密经历

    1 引言 数月前写过某网站(请原谅我的掩耳盗铃)的爬虫,这两天需要重新采集一次,用的是scrapy-redis框架,本以为二次爬取可以轻松完成的,可没想到爬虫启动没几秒,出现了大堆的重试提示,心里顿时 ...

  3. java简单使用netty

    一 整合 由于本人的学过的技术太多太乱了,于是决定一个一个的整合到一个springboot项目里面. 附上自己的github项目地址 https://github.com/247292980/spri ...

  4. Oracle 搭建Node.js开发环境

      先决条件 安装oralce客户端驱动. 安装node.js.   创建项目 安装oracledb模块 $npm install oracledb 如果失败了,你可能要爬墙.   参考package ...

  5. 10.&与&&以及位运算符。

    这是单独的一块,因为一条讲不清楚(虽然内容也不够一篇),而且我之前也没好好弄清楚,所以有必要写出来. 说位运算符也是从&与&&(|与||类似)之间的区别讲起的.事实上,对于两个 ...

  6. mybatis-plus 异常 Invalid bound statement (not found)

    最近吧项目中添加使用了mybatis-plus,发现操作sql的时候出现异常: Invalid bound statement (not found) ,异常位置位于mybatis-plus的jar中 ...

  7. Java面向对象的练习。动物乐园

    本次项目是:以面向对象的思想设计动物乐园系统. 动物乐园中有猫,狗,鸭子等成员,还可以增加新成员. 猫和鸭子都有自己的名字,都有自己的腿,但腿的条数不同,猫和鸭子会发出叫声,猫的叫声是:喵喵喵……,鸭 ...

  8. java8 api简介(一)

    from https://www.aliyun.com/jiaocheng/785076.html 摘要:函数式编程详解:前言:现在有很多公司都用了jdk8,但是函数式编程也许没有用上,jdk8也提供 ...

  9. 软件测试Lab 1 Junit and Eclemma

    首先安装eclipse 然后下载hamcrest-core-1.3.jar,下载地址:http://mvnrepository.com/artifact/org.hamcrest/hamcrest-c ...

  10. map侧连接

    两个数据集中一个非常小,可以让小数据集存入缓存.在作业开始这些文件会被复制到运行task的节点上. 一开始,它的setup方法会检索缓存文件. 与reduce侧连接不同,Map侧连接需要等待参与连接的 ...