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

　　　　例子：
　　　　　　<script>
　　　　　　　　window.onload=function(){
　　　　　　　　　　　　new Vue({
　　　　　　　　　　　　　　el:'#box',
　　　　　　　　　　　　　　data:{
　　　　　　　　　　　　　　　　giveData:{
　　　　　　　　　　　　　　　　　　　　a:'我是父组件数据'
　　　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　　　　　},
　　　　　　　　　　　　　　components:{
　　　　　　　　　　　　　　　　'child-com':{
　　　　　　　　　　　　　　　　　　props:['msg'],
　　　　　　　　　　　　　　　　　　template:'#child',
　　　　　　　　　　　　　　　　　　methods:{
　　　　　　　　　　　　　　　　　　　　　　change(){
　　　　　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　　　　　　　　　　this.msg.a='被改了';
　　　　　　　　　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　　　　　　　　　　　}　　
　　　　　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　　　　　　});
　　　　　　　　　　　　　　};
　　　　　　</script>
　　　　　　<template id="child">
　　　　　　　　　　<div>
　　　　　　　　　　　　<span>我是子组件</span>
　　　　　　　　　　　　<input type="button" value="按钮" @click="change">
　　　　　　　　　　　　<strong>{{msg.a}}</strong>
　　　　　　　　　　</div>
　　　　　　</template>

　　　　　　<div id="box">
　　　　　　　　　　父级: ->{{giveData.a}}
　　　　　　　　<br>
　　　　　　　　<child-com :msg="giveData"></child-com>
　　　　　　</div>

　　例子：自定义事件

　　　　

　　<script>
　　　　//准备一个空的实例对象
　　　　var Event=new Vue();

　　　　　　var A={
　　　　　　　　　　template:`
　　　　　　　　　　　　　　　　<div>
　　　　　　　　　　　　　　　　　　<span>我是A组件</span> -> {{a}}
　　　　　　　　　　　　　　　　　　<input type="button" value="把A数据给C" @click="send">
　　　　　　　　　　　　　　　　</div>
`　　　　　　　　　　　　　　,
　　　　　　　　　　　　　　methods:{
　　　　　　　　　　　　　　　　　　send(){
　　　　　　　　　　　　　　　　　　　　　　Event.$emit('a-msg',this.a);
　　　　　　　　　　　　　　　　}
　　　　　　　　　　},
　　　　　　　　　　data(){
　　　　　　　　　　　　　　return {
　　　　　　　　　　　　　　　　a:'我是a数据'
　　　　　　　　　　　　　　}
　　　　　　　　　　　　}
　　　　　　　　};
　　　　　　var B={
　　　　　　　　　　　　template:`
　　　　　　　　　　　　　　　　　　<div>
　　　　　　　　　　　　　　　　　　　　　　<span>我是B组件</span> -> {{a}}
　　　　　　　　　　　　　　　　　　　　　　<input type="button" value="把B数据给C" @click="send">
　　　　　　　　　　　　　　　　　　</div>
　　　　　　　　　　　　　　`,
　　　　　　　　　　　　methods:{
　　　　　　　　　　　　　　　　send(){
　　　　　　　　　　　　　　　　　　　　Event.$emit('b-msg',this.a);
　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　},
　　　　　　　　　　data(){
　　　　　　　　　　　　return {
　　　　　　　　　　　　　　　　a:'我是b数据'
　　　　　　　　　　　　　　}
　　　　　　　　　　}
　　　　　　　　};
　　　　　　var C={
　　　　　　　　template:`
　　　　　　　　　　　　　　<div>
　　　　　　　　　　　　　　　　<h3>我是C组件</h3>
　　　　　　　　　　　　　　　　<span>接收过来的A的数据为: {{a}}</span>
　　　　　　　　　　　　　　　　<br>
　　　　　　　　　　　　　　　　<span>接收过来的B的数据为: {{b}}</span>
　　　　　　　　　　　　　　</div>
　　　　　　　　　　　　`,
　　　　　　　　　　　　data(){
　　　　　　　　　　　　　　return {
　　　　　　　　　　　　　　　　　　a:'',
　　　　　　　　　　　　　　　　　　b:''
　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　　},
　　　　　　　　　　mounted(){
　　　　　　　　　　　　　　　　//var _this=this;
　　　　　　　　　　　　　　　　//接收A组件的数据
　　　　　　　　　　　　　　　　Event.$on('a-msg',function(a){
　　　　　　　　　　　　　　　　　　　　　　this.a=a;
　　　　　　　　　　　　　　　　}.bind(this));

　　　　　　　　　　　　　　　　//接收B组件的数据
　　　　　　　　　　　　　　　　Event.$on('b-msg',function(a){
　　　　　　　　　　　　　　　　　　　　　　this.b=a;
　　　　　　　　　　　　　　　　　　}.bind(this));
　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　};

　　　　　　　　window.onload=function(){
　　　　　　　　　　　　　　new Vue({
　　　　　　　　　　　　　　　　　　el:'#box',
　　　　　　　　　　　　　　　　　　components:{
　　　　　　　　　　　　　　　　　　　　　　　　'com-a':A,
　　　　　　　　　　　　　　　　　　　　　　　　'com-b':B,
　　　　　　　　　　　　　　　　　　　　　　　　'com-c':C
　　　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　　　});
　　　　　　　　};
　　　　</script>

<body>
　　　<div id="box">
　　　　　　<com-a></com-a>
　　　　　　<com-b></com-b>
　　　　　　<com-c></com-c>
　　</div>
</body>

vue2.0 组件通信的更多相关文章

  1. vue2.0组件通信各种情况总结与实例分析

    Props在vue组件中各种角色总结 在Vue中组件是实现模块化开发的主要内容,而组件的通信更是vue数据驱动的灵魂,现就四种主要情况总结如下: 使用props传递数据---组件内部 //html & ...

  2. vue2.0组件通信小总结

    1.父组件->子组件 父组件 <parent> <child :child-msg="msg"></child>//这里必须要用 - 代替 ...

  3. 通信vue2.0组件

    vue2.0组件通信各种情况总结与实例分析   Props在vue组件中各种角色总结 在Vue中组件是实现模块化开发的主要内容,而组件的通信更是vue数据驱动的灵魂,现就四种主要情况总结如下: 使用p ...

  4. vue2.0组件传值

    props down   emit up 嘿嘿    如果是第一次接触vue2.0组件传值的肯定很疑惑,这是什么意思(大神总结的,我也就是拿来用用) “down”—>指的是下的意思,即父组件向子 ...

  5. vue2.0组件库

    UI组件 element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组件库 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开 ...

  6. Vue2.0组件之间通信（转载）

    Vue中组件这个特性让不少前端er非常喜欢,我自己也是其中之一,它让前端的组件式开发更加合理和简单.笔者之前有写过一篇Vue2.0子父组件通信,这次我们就来聊一聊平级组件之间的通信. 首先我们先搭好开 ...

  7. Vue2.0组件之间通信

    Vue中组件这个特性让不少前端er非常喜欢,我自己也是其中之一,它让前端的组件式开发更加合理和简单.笔者之前有写过一篇Vue2.0子父组件通信,这次我们就来聊一聊平级组件之间的通信. 首先我们先搭好开 ...

  8. v2.0 组件通信的总结

    在vue.js现在比较流行,层出不穷的js框架越来越强调数据绑定,组件化开发. 正在给公司做一个管理后台,基本思路是编写几个通用组件,采用单页面应用的形式完成: 结构大致如下: mainVue lef ...

  9. Vue2.0组件实现动态搜索引擎（一）

    原文链接:https://blog.csdn.net/qwezxc24680/article/details/74550556 从github上看到一个不错的开源项目:https://github.c ...

随机推荐

  1. 自适应滤波——线性预测（LPC）

    作者:桂. 时间:2017-03-26  10:12:07 链接:http://www.cnblogs.com/xingshansi/p/6621914.html 声明:欢迎被转载,不过记得注明出处哦 ...

  2. jquery-base64.js插件使用

    官方文档地址:https://github.com/yckart/jquery.base64.js var a="123"; var b=$.base64.btoa(a); con ...

  3. bootstrap-dialog插件的使用

    官网文档:http://nakupanda.github.io/bootstrap3-dialog BootstrapDialog.show({ message: 'Hi Apple!', messa ...

  4. 任务一：零基础HTML编码练习

    任务目的 了解HTML的定义.概念.发展简史 掌握常用HTML标签的含义.用法 能够基于设计稿来合理规划HTML文档结构 理解语义化,合理地使用HTML标签来构建页面 任务描述:完成一个HTML页面代 ...

  5. [原]C#与非托管——动机

    Unity3D采用C#作为脚本开发语言,本来是可以直接提供代码局部更新机制的,可惜Mono和Unity3D迫于苹果的压力,在iOS上采用AOT模式运行,断绝了代码局部更新的路(任何一个具有很高知名度的 ...

  6. 老李分享：接电话之uiautomator 2

    case解释 首先要了解进入uiwatcher方法中的机制,是在你某个控件找不到的情况下会进入.但是你得保证进入以后处理完来电界面以后,这条case得保证正确,那么说明回来以后这个控件要能找到.刚开始 ...

  7. 老李推荐： 第3章2节《MonkeyRunner源码剖析》脚本编写示例: MonkeyDevice API使用示例 4

    第七步:保存新增加日记 代码3-2-7 增加日记-保存日记 #Step7: Save the note by touch on the "save" menu entry by c ...

  8. Android自定义View之音频条形图

    2016-04-12 17:52 76人阅读 评论(2) 收藏 举报  分类: Android(26)  版权声明:本文为博主原创文章,未经博主允许不得转载. 新建项目,新建MusicRectangl ...

  9. 云计算之路-阿里云上：RDS数据库连接数过万引发故障，主备库切换后恢复正常

    非常抱歉!今天 12:03-12:52 ,由于数据库连接数异常突增超过1万,达到了阿里云RDS的最大连接数限制,影响了全站的正常访问.由此给您带来麻烦,请您谅解. 在发现数据库连接数突增的问题后,我们 ...

  10. matlab函数：c2d离散化函数（待完善）

    Convert model from continuous to discrete time sysd =c2d(sys,Ts)sysd =c2d(sys,Ts,method)sysd =c2d(sy ...