平级组件的通信 一个全局发布订阅模式，它是挂载到全局的

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>组件通信 &bus</title>

    <script src="./node_modules/vue/dist/vue.js"></script>

</head>

<body>

    <div id="app">

       <children1></children1>

       <children2></children2>

    </div>

</body>

<script>

    //发布订阅模式

    //适合简单的数据流

     Vue.prototype.$bus = new Vue();

    Vue.component('children1',{

     template:`<div><span>children1</span></div>`,

     mounted() {

         this.$bus.$on('吃',(food)=>{

             console.log(food)

         })

     },

   })

   Vue.component('children2',{

     template:`<div><span>children2</span></div>`,

     mounted() {

         this.$bus.$emit('吃','月饼')

     },

   })

   let  vm = new Vue({

         el:'#app',

   })

   //hello

</script>

</html>

组件通信 eventtBus的更多相关文章

  1. 关于React的父子组件通信等等

    //==================================================此处为父子组件通信 1.子组件调用父组件: 父组件将子组件需要调用方法存入props属性内,子组 ...

  2. Angular2 组件通信

    1. 组件通信 我们知道Angular2应用程序实际上是有很多父子组价组成的组件树,因此,了解组件之间如何通信,特别是父子组件之间,对编写Angular2应用程序具有十分重要的意义,通常来讲,组件之间 ...

  3. vue.js入门（3）——组件通信

    5.2 组件通信 尽管子组件可以用this.$parent访问它的父组件及其父链上任意的实例,不过子组件应当避免直接依赖父组件的数据,尽量显式地使用 props 传递数据.另外,在子组件中修改父组件的 ...

  4. Intent进行组件通信的一些体会

    Intent进行组件通信的原理 l  Intent协助应用间的交互与通讯 Intent负责对应用中一次操作的动作.动作涉及数据.附加数据进行描述.Android则根据此Intent的描述,负责找到对应 ...

  5. 进程外组件通信之免注册com通信【原创】

    最近在搞进程外组件通信的东西,写了个demo,免注册的,一直没调通,其实就是两个问题卡了好几天,也没找到有用的资料,试了好几天终于才解决,现简单记录下来,免得大家跟我走一样的弯路.下面com端程序名称 ...

  6. vue2.0 组件通信

    组件通信: 子组件要想拿到父组件数据 props 子组件不允许直接给父级的数据, 赋值操作如果想更改,父组件每次穿一个对象给子组件, 对象之间引用. 例子: <script> window ...

  7. React之组件通信

    组件通信无外乎,下面这三种父子组件,子父组件,平行组件(也叫兄弟组件)间的数据传输.下面我们来分别说一下: 父子组件: var Demo=React.createClass({ getInitialS ...

  8. Vue 非父子组件通信

    组件是Vue核心的一块内容,组件之间的通信也是很基本的开发需求.组件通信又包括父组件向子组件传数据,子组件向父组件传数据,非父子组件间的通信.前两种通信Vue的文档都说的很清楚,但是第三种文档上确只有 ...

  9. vue子父组件通信

    之前在用vue写子父组件通信的时候,老是遇到问题!!! 子组件传值给父组件: 子组件:通过emit方法给父组件传值,这里的upparent是父组件要定义的方法 模板: <div v-on:cli ...

随机推荐

  1. leetcode-mid-math-29. Divide Two Integers-NO

    mycode   91.28% class Solution(object): def divide(self, dividend, divisor): """ :typ ...

  2. SHELL输出颜色和闪烁控制

    Shell 颜色和闪烁控制 在Shell下有时候需要定制输出,比如给输出加上颜色,或者显示高亮,或者添加闪烁等. 然后这些颜色代码或者控制码等相对不好记住.这个时候我们可以考虑把最终想要的结果制定成对 ...

  3. is_displayed()检查元素是否可见

    返回的结果是bool类型,以百度首页为案例,来验证"©2019 Baidu 使用百度前必读意见反馈京ICP证030173号 "是否可见,见实现的代码: from selenium ...

  4. back()是返回，也就是说，先加载地址到A页面，再打开页面到B页面，调用 back()方法，就返回到了A页面

    from selenium import webdriverdriver=webdriver.Firefox()driver.maximize_window()driver.get('http://w ...

  5. robot framework python3环境下学习笔记(1)——安装robot framework

    安装环境:win10 64位,python3.6 1,安装robot framework pip install robotframework 2,安装wxPython pip install wxP ...

  6. Java中的内存泄露 和 JVM GC（垃圾回收机制）

    一.什么是Java中的内存泄露? 在Java中,内存泄漏就是存在一些被分配的对象,这些对象有下面两个特点, 首先,这些对象是可达的,即在有向图中,存在通路可以与其相连:其次,这些对象是无用的,即程序以 ...

  7. CentOS安装部署sha##dow**socks

    注意事项,pip版本不能太低,实测9.0.3可行(需要python 2.7,低版本python升级办法另有文章介绍). pip --version 以shadowsocks-2.8.2为例: pip ...

  8. spring扩展点之PropertyPlaceholderConfigurer

    原理机制讲解 https://leokongwq.github.io/2016/12/28/spring-PropertyPlaceholderConfigurer.html 使用时多个配置讲解 ht ...

  9. Docker数据持久化及实战(Nginx+Spring Boot项目+MySQL)

    Docker数据持久化: Volume: (1)创建mysql数据库的container docker run -d --name mysql01 -e MYSQL_ROOT_PASSWORD= my ...

  10. python 三元表达式

    python 三元表达式(ternary expression)  把 if-else块 写到一行或者一个表达式中 并且产生一个值 value = true if condition else fal ...