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. jquery——下载、使用

    jQuery是目前使用最广泛的javascript函数库. 怎样安装? 这是下载地址:https://code.jquery.com/ minified是压缩版的 新建一个网页打开上面这个网址,ctr ...

  2. Linux中vim编辑器的总结

    vi( Visual Interface ) vim( VI iMproveed ):为纯文本(ASCII)全屏编辑器,也是模式化编辑器. vim的三种模式: 1)编辑模式(命令模式) 2)输入模式 ...

  3. android打开文件、保存对话框、创建新文件夹对话框(转载)

    转载地址:点击打开 这是一个简单的只有3个按钮的程序,3个按钮分别对应三种工作的模式(保存.打开和文件夹选择).封装的SimpleFileDialog.java的内容如下: package com.e ...

  4. mybatis批量插入插入数据、批量条件查询

    ps:参考文章连接:https://www.cnblogs.com/admol/articles/4248159.html 关于个人的使用经验:先把数据放到bean中,多个的话就全放入list集合,如 ...

  5. swift学习笔记7

    不管做什么事,只要敬业点,把该作的做好.不要总找借口. 不要看不起小事,生活本是一件件小事的集合.细节决定成败. 士兵突击里面有句台词:他每做一件小事的时候,都好像抓住了一根救命稻草,到最后你才发现, ...

  6. 洛谷P4133 [BJOI2012]最多的方案(记忆化搜索)

    题意 题目链接 求出把$n$分解为斐波那契数的方案数,方案两两不同的定义是分解出来的数不完全相同 Sol 这种题,直接爆搜啊... 打表后不难发现$<=1e18$的fib数只有88个 最先想到的 ...

  7. Compaq Visual Fortran生成静态库的方法及使用

    Compaq Visual Fortran 6.5生成lib静态库详细方法: 打开Compaq Visual Fortran,新建Fortran Static Library工程,命名为ForLib: ...

  8. ajax请求总是返回error的问题

    多半是因为返回值格式的问题,在后台返回的应与前台设定的值一直,不然就会进入error,会报404服务器错误,极有可能是后台返回的数据类型不对 public void exitSystem( HttpS ...

  9. 数据库SQL优化大总结之 百万级数据库优化方案2

      网上关于SQL优化的教程很多,但是比较杂乱.近日有空整理了一下,写出来跟大家分享一下,其中有错误和不足的地方,还请大家纠正补充. 这篇文章我花费了大量的时间查找资料.修改.排版,希望大家阅读之后, ...

  10. LeetCode Longest Substring Without Repeating Characters 最长不重复子串

    题意:给一字符串,求一个子串的长度,该子串满足所有字符都不重复.字符可能包含标点之类的,不仅仅是字母.按ASCII码算,就有2^8=128个. 思路:从左到右扫每个字符,判断该字符距离上一次出现的距离 ...