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. (转)Linux 开机引导和启动过程详解

    Linux 开机引导和启动过程详解 编译自:https://opensource.com/article/17/2/linux-boot-and-startup作者: David Both 原创:LC ...

  2. ZK配置文件

    The number of milliseconds of each tick, 最小时间单位,很多运行时的时间 #间隔都是使用tickTime的倍数来表示的,例如initLimit=10就是tick ...

  3. java多线程,如何防止脏读数据

    多线程容易“非线程安全”的情况,是由于用了全局变量,而又没有很好的控制起情况.所以无论做什么程序,谨慎使用全局变量 "非线程安全"其实会在多个线程对同一个对象中的实例变量进行并发访 ...

  4. jQuery 获取和设置表单元素

    jQuery提供了val()方法,使用它我们可以快速地获取和设置表单的文本框.单选按钮.以及单选按钮的值. 使用val()不带参数,表示获取元素的值 使用val()给定参数,则表示把值赋给元素 如下: ...

  5. 开始使用JQuery 方法

    使用jQuery需要3个基本步骤: 1. 下载jQuery.js并保存在网页可以存取的位置.下载链接:dowload 2. 在HTML的head里引用jQuery.js 3. 运用jQuery的方法 ...

  6. 《C#高效编程》读书笔记07-理解GetHashCode()的陷阱

    GetHashCode()函数仅会在一个地方用到,即为基于散列(hash)的集合定义的散列键时,此类集合包括HashSet和Dictionary<K,V>容器等. 但object基类提供的 ...

  7. 我对USB的认识

    一.USB协议规范 (1)      基本概念   每一个设备(device)会有一个或者多个的逻辑连接点在里面,每个连接点叫endpoint.每个endpoint有四种数据传送方式:控制(Contr ...

  8. jQuery实现加载中效果,防止重复提交

    //导出表格加载中的提示var dian=0;//控制'●'的个数var t=null;//停止时使用function id_loadspot(loadspotSpan,loadingDiv,expo ...

  9. 子元素的margin-top会影响父元素

    ---恢复内容开始--- 之前在写项目的时候,发现原本想让父子元素之间加点边距,却让父元素产生了margin-top,于是百度之后发现了原因. 在css2.1盒模型中 In this specific ...

  10. jQuery-动画animate() 方法操作 CSS 属性

    语法: $(selector).animate({params},speed,callback); 多个params 之间用逗号(,)隔开. 必须使用 Camel 标记法书写所有的属性名,比如,必须使 ...