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

<!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. 如何在maven项目中引用领一个项目

    1 有两个项目 maven01  和maven 02,想在maven 02中引用maven01的方法,该如何操作呢 maven01中Factory类中的方法 public class Factory ...

  2. leetcode 102.Binary Tree Level Order Traversal 二叉树的层次遍历

    基础为用队列实现二叉树的层序遍历,本题变体是分别存储某一层的元素,那么只要知道,每一层的元素都是上一层的子元素,那么只要在while循环里面加个for循环,将当前队列的值(即本层元素)全部访问后再执行 ...

  3. linux配置ssh公钥认证,打通root用户的免密码输入的scp通道

    1.ssh-keygen ssh-keygen是unix-like系统的一个用来生成.管理ssh公钥和私钥的工具. 2.用法 常用的重要的选项有: -b num   指定生成多少比特长度的key,单位 ...

  4. C# CLR20R3 程序终止的几种解决方案 【转】

    [转]CLR20R3 程序终止的几种解决方案   这是因为.NET Framework 1.0 和 1.1 这两个版本对许多未处理异常(例如,线程池线程中的未处理异常)提供支撑,而 Framework ...

  5. jupyter 服务器安装随笔

    python3:python3 -m pip install --upgrade pip python3 -m pip install jupyterpkg install py36-pyzmq-18 ...

  6. 将Unix时间戳转换为Date、Json属性动态生成反序列化、序列化指定属性

    实体类 public class Test { [JsonIgnore] public string GetDate { get { return GetTime.ToString("yyy ...

  7. 操作系统安全 - 提权 - Windows提权 - 汇总

    CVE_2019-1388 Date: -- 影响范围: SERVER ====== Windows 2008r2 ** link OPENED AS SYSTEM ** Windows 2012r2 ...

  8. 爬取LeetCode题目——如何发送GraphQL Query获取数据

    前言   GraphQL 是一种用于 API 的查询语言,是由 Facebook 开源的一种用于提供数据查询服务的抽象框架.在服务端 API 开发中,很多时候定义一个接口返回的数据相对固定,因此要获得 ...

  9. docker安装tomcat&部署javaweb程序

    一.docker定制简单的java-web应用镜像 网址: 1.jdk下载网址:https://www.oracle.com/technetwork/java/javase/downloads/jdk ...

  10. Java基础语法—流程控制语句

    在一个程序执行的过程中,各条语句的执行顺序对程序的结果是有直接影响的.所以,我们必须清楚每条语句的执行流程.而且,很多时候要通过控制语句的执行顺序来实现我们想要的功能. 3.1 流程控制语句分类 ​ ...