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.  $(document).ready(function() { });

    l  $(document).ready(function() {   }); 初始化jsp

  2. Maven的学习资料收集--(六) 构建Hibernate项目

    前面我们使用Maven构建了Struts2项目,这里我们来试一下Hibernate项目: 这里的例子,大体框架应该是正确的,但是,对于Maven的很多约定都没有掌握,估计包的命名都不是非常好,等以后, ...

  3. matlab 打不开excel文件

    方法论 excel的后缀为.xls, matlab是无法识别的, 需要将其另存为.xlsx文件格式 打开excel, 点击save as, 选中保存的文件格式是.xlsx即可

  4. Vue provide/inject 部分源码分析 实现响应式数据更新

    provide/inject 数据响应式更新的坑及源码解析 下面是我自己曾经遇到 一个问题,直接以自己QA的形式来写吧 自问自答了,需要的同学也可以直接访问segmentfault地址 官网给出实例, ...

  5. C 碎片一 计算机知识

    一.计算机知识 1, 计算机组成及工作原理 计算机是硬件和软件的结合体.硬件由主机箱和外部设备组成,主机主要包括CPU.内存.主板.硬盘.光驱.各种扩展卡.连接线.电源等:外部设备包括鼠标.键盘等.软 ...

  6. Second Highest Salary

    Write a SQL query to get the second highest salary from the Employee table. +----+--------+ | Id | S ...

  7. 【Python】python2 str 编码检测

    python2 str 编码检测 import chardet s = 'sdffdfd' print type(s) print chardet.detect(s) s2 = '反反复复' prin ...

  8. ngnix入门配置

    文件1.首先到ngnix下载页面下载你操作系统对应的ngnix压缩包    http://nginx.org/en/download.html 博主我是window10操作系统  上面是我解压之后放的 ...

  9. python 实例方法,类方法,静态方法

    实例方法 class Human(object): def __init__(self, weight): self.weight = weight def get_weight(self): ret ...

  10. ThinkPHP添加扩展配置失败

    扩展配置可以支持自动加载额外的自定义配置文件,并且配置格式和项目配置一样.设置扩展配置的方式如下(多个文件用逗号分隔): // 加载扩展配置文件 'LOAD_EXT_CONFIG' => 'us ...