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. Windows应用程序未响应

    昨天在安装postgresql的扩展功能postgis的时候,stackbuilder刚打开就死掉,一直未响应,刚开始以为是内存的原因,后来发现并没有占用太多内存,最后打开vpn发现就可以了,原来是网 ...

  2. Murano 网址一览

    [Murano_Meeting] http://eavesdrop.openstack.org/#Murano_Meeting [Murano_Meeting_Agenda] https://wiki ...

  3. IE6下float双边距问题

    当浮动元素的方向和设置margin的方向相同时,就会出现双边距问题,解决方法是: 删除浮动,改成display:inline-block _display:inline; _zoom:1;

  4. 无需控件直接导出xls(csv)

    /// <summary> /// 执行导出 /// </summary> /// <param name="ds">要导出的DataSet&l ...

  5. 添加egit插件

    1.下载egit插件 打开Eclipse,git需要eclipse授权,通过网页是无法下载egit的安装包的.在菜单栏依次打开eclipse→help→install new software→add ...

  6. poj3334(Connected Gheeves)

    Connected Gheeves Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 1008   Accepted: 368 ...

  7. ADS主要仿真器介绍

    ADS主要仿真器介绍        ADS ( Advanced Design System ) 是美国Agilent公司推出的电路和系统分析软件,它集成多种仿真软件的优点,仿真手段丰富多样,可实现包 ...

  8. HDU3371 Connect the Cities

    题目描述: 有n个小岛,其中有的小岛之间没有通路,要修这样一条通路需要花费一定的钱,还有一些小岛之间是有通路的.现在想把所有的岛都连通起来,求最少的花费是多少. 输入: 第一行输入T,代表多少组数据. ...

  9. 使用JDBC操作SAP云平台上的HANA数据库

    本文假设您对JDBC(Java Database Connectivity)有最基本的了解.您也可以将其同ADBC(ABAP Database Connectivity)做对比,细节请参考我的博客AD ...

  10. 初见微服务之RESTful API

    1. REST名称由来 REST全称为Representational State Transfer,即表述性状态转移,最早由Roy Feilding博士在世纪之交(2000年)提出,喜欢追根溯源的朋 ...