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. 【转】grunt动态生成文件名

    动态生成文件名 expand 设置为true打开以下选项 cwd 所有src指定的文件相对于这个属性指定的路径 src 要匹配的路径,相对与cwd dest 生成的目标路径前缀 ext 替换所有生成的 ...

  2. RN 从上手到“放弃”

    RN 从上手到"放弃" 前言: react-native,相对于最近

  3. SpringBoot | 第二十二章:定时任务的使用

    前言 上两章节,我们简单的讲解了关于异步调用和异步请求相关知识点.这一章节,我们来讲讲开发过程也是经常会碰见的定时任务.比如每天定时清理无效数据.定时发送短信.定时发送邮件.支付系统中的定时对账等等, ...

  4. chroot 的应用

    http://www.williamlong.info/archives/3864.html http://my.oschina.net/u/1590519/blog/342576

  5. Android客户端与PC服务端、android服务端通过WiFi通信

    前期准备:我的是Linux Mint操作系统(总之折腾的过程中怀疑过是不是系统的问题),首先是要创建wifi热点给android手机使用,这个时候笔记本作为通信的服务器端,android手机作为客户端 ...

  6. 金三银四面试季节之Java 核心面试技术点 - JVM 小结

    原文:https://github.com/linsheng9731/notebook/blob/master/java/JVM.md 描述一下 JVM 的内存区域 程序计数器(PC,Program ...

  7. It's the loneliest feeling not to know who you are.

    It's the loneliest feeling not to know who you are.最孤独的感觉莫过于不知道自己是谁.

  8. Wince 6.0获取设备的分辨率 自动设置窗体位置

    调用微软提供给wince的API  “coredll.dll” [DllImport("coredll.dll")] public static extern int GetSys ...

  9. linux 命令——27 chmod

    chmod命令用于改变linux系统文件或目录的访问权限.用它控制文件或目录的访问权限.该命令有两种用法. 一种是包含字母和操作符表达式的文字设定法: 另一种是包含数字的数字设定法. Linux系统中 ...

  10. Android(java)学习笔记89:Bundle和Intent类使用和交互

    1. Bundle 和 Intent:    Bundle只是一个信息的载体 将内部的内容以键值对组织 ,Intent负责Activity之间的交互自己是带有一个Bundle的.Intent.putE ...