<div id="app">
<comp1></comp1>
<comp2></comp2>
</div>
Vue.component('comp1', {
template: `
<div>
<p>我是第一个组件</p>
<input type="text" @keyup="send" v-model="comp1_msg"/>
</div>
`,
data(){
return {
comp1_msg: ''
}
},
methods: {
send(){
event.$emit('comp1_send', this.comp1_msg);
}
}
}); Vue.component('comp2', {
template: `
<div>
<P>我是第二个组件</P>
<p>{{comp2_msg}}</p>
</div>
`,
data(){
return {
comp2_msg: ''
}
},
mounted(){
let me = this;
event.$on('comp1_send', function(data){
me.comp2_msg = data;
});
}
}); new Vue({
el: "#app"
})

vue组件通信之任意级组件之间的通信的更多相关文章

  1. vue通过事件向父级组件发送消息(官网点击放大例子)

    注意:Vue.component一定要写在new Vue之前 在页面中使用组件 整体代码示例

  2. vue任意关系组件通信与跨组件监听状态 vue-communication

    大家好!我是木瓜太香! 众所周知,组件式开发方式给我们带来了方便,不过也引入了新的问题,组件之间的数据就像被一道无形的墙隔开,如果我们希望临时让两个组件直接通信,vuex 太巨,而 $emit 又不好 ...

  3. 基础学习day12--多线程一线程之间的通信和常用方法

    一.线程之间的通信 1.1.线程之间的通信方法 多个线程在处理统一资源,但是任务却不同,这时候就需要线程间通信.    等待/唤醒机制涉及的方法:    1. wait():让线程处于冻结状态,被wa ...

  4. Python_架构、同一台电脑上两个py文件通信、两台电脑如何通信、几十台电脑如何通信、更多电脑之间的通信、库、端口号

    1.架构 C/S架构(鼻祖) C:client  客户端 S:server  服务器 早期使用的一种架构,目前的各种app使用的就是这种架构,它的表现形式就是拥有专门的app. B/S架构(隶属于C/ ...

  5. Vue.js组件之同级之间的通信

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. vue 基础-->进阶 教程(3):组件嵌套、组件之间的通信、路由机制

    前面的nodejs教程并没有停止更新,因为node项目需要用vue来实现界面部分,所以先插入一个vue教程,以免不会的同学不能很好的完成项目. 本教程,将从零开始,教给大家vue的基础.高级操作.组件 ...

  7. vue组件之间的传值——中央事件总线与跨组件之间的通信($attrs、$listeners)

    vue组件之间的通信有很多种方式,最常用到的就是父子组件之间的传值,但是当项目工程比较大的时候,就会出现兄弟组件之间的传值,跨级组件之间的传值.不可否认,这些都可以类似父子组件一级一级的转换传递,但是 ...

  8. vue中组件之间的通信

    一.vue中组件通信的种类 父组件向子组件的通信 子组件向父组件的通信 隔代组件之间的通信 兄弟 组件 之间的通信 二.实现通信的方式  props vue自定义的事件 消息订阅与发布 vuex sl ...

  9. Vue.js组件之间的通信

    导语:组件之间的关系不外乎两种, 父子组件和非父子组件,本文将对两类组件之间的通信方式进行详细阐述. 父子组件间的通信 通信方式1(单向绑定): Props down, Events up (建议使用 ...

随机推荐

  1. 20170927 Webservice发布指定账户进行访问

    1. 搭建IIS 平台 于服务器A1 2.发布Webservice 到A1 我的问题在于(Webservice中方法中内容会对B1服务器的共享路径进行写入文件动作), 如何来控制网页使用特定的账户去访 ...

  2. python的执行顺序

    为了区分是主动执行(如python test.py)还是被动调用(如import test),python用__name__来进行标识. 当主动执行时,__name__为__main__,当被调用时, ...

  3. 【开发者笔记】python中的类方法(@classmethod)和静态方法(@staticmethod)

    在java.c#等高级语言中我们用static来定义静态方法和静态变量,那么在python中如何定义静态方法和静态变量呢. python提供了@classmethod和@staticmethod来定义 ...

  4. Python重要网址

    极客学院视频:http://www.jikexueyuan.com/path/python/ 知乎爬虫:https://www.zhihu.com/collection/129856874?page= ...

  5. vue打包后404,webpack配置问题

    首先声明这是基于vue2.x的 1. 将其中build的配置项assetsPublicPath进行修改,改为上图-->目的是将资源文件的引入路径,改为相对地址(相对index.html) 2.h ...

  6. vue中兄弟组件间 的传值 bus(可以理解为公共交通)

    点击大儿子(头部组件的年月日,下面的都要变化) 就相当于点击了年月日之后,下面的组件重新调接口,参数变化       1.首先随便哪儿写个bus.js 内容如下: import Vue from 'v ...

  7. cocos2d JS-(JavaScript) 函数类型相互转换(字符串、整形、浮点形、布尔值)

    工作忙好些天了,近段时间抽点空分享一下自己学习JS的一点笔记心得做点记录,大神勿喷,谢谢! 1.字符串的转化 var found = false; console.log(found.toString ...

  8. Java第一次考试作业

    这次考试感觉自己充分的意识到自己的不足,对于Java没有系统的理解,敲程方面也有很大问题,本次程序题目为ATM机的账户记录Account有账户的唯一性标识,用户的姓名,操作日期(Date),操作类型, ...

  9. ES6 变量的解构

    默认值 let [foo = true] = []; foo // true let [x, y = 'b'] = ['a']; // x='a', y='b' let [x, y = 'b'] = ...

  10. python对缩进的严格要求

    一般的编辑器都会默认Tab键为四格缩进,但是在python脚本中,Tab与直接4个tablespace空格是有区别的. 一般表现为报错信息如下: IndentationError: unindent ...