组件通信：
　　　　子组件要想拿到父组件数据 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. iOS开发之数据存储之NSData

    1.概述 使用archiveRootObject:toFile:方法可以将一个对象直接写入到一个文件中,但有时候可能想将多个对象写入到同一个文件中,那么就要使用NSData来进行归档对象. NSDat ...

  2. LVS的原理介绍

    DR模式  LVS 的VIP 和 realserver 必须在同一个网段,不然广播后所有的包都会丢掉: 提前确认LVS/硬件LB 是什么模式,是否需要在同一个网段 所有的realserver 都必须绑 ...

  3. 一个web应用的诞生(9)--回到用户

    在开始之前,我们首先根据之前的内容想象一个场景,用户张三在网上浏览,看到了这个轻博客,发现了感兴趣的内容,于是想要为大家分享一下心情,恩?发现需要注册,好,输入用户名,密码,邮箱,并上传头像后,就可以 ...

  4. 任务调度之集群（基于Quartz.net）

    上一篇我们完成了任务调度的持久化,传送门:任务调度之持久化(基于Quartz.net) 这篇我们来完成Quartz.net的一个比较优秀的功能,即集群:集群可以提高任务调度服务的容灾性, 当一个节点宕 ...

  5. 机器学习:Python实现lms中的学习率的退火算法

    ''' 算法:lms学习率的退火算法 解决的问题:学习率不变化,收敛速度较慢的情况 思路:由初始解和控制参数初值开始,对当前解重复进行"产生新解-->计算目标函数差--> 接受或 ...

  6. Yii2高级模板vendor和application非同级目录部署

    上面是Yii2的高级模板,当我们有多个application的时候,这种高级模板可以可以提供很好的扩展性,多个application共用一份YII2框架,默认情况下,框架和application是在同 ...

  7. poptest老李谈动态口令原理

    poptest老李谈动态口令原理     poptest是国内唯一一家培养测试开发工程师的培训机构,以学员能胜任自动化测试,性能测试,测试工具开发等工作为目标.如果对课程感兴趣,请大家咨询qq:908 ...

  8. 庆祝POPTEST签约企业培训

    庆祝POPTEST签约企业培训 POPTEST与众多培训企业进行技术PK,由于企业认可POPTEST的技术实力,从众多竞争对手中脱颖而出,成功中标清华控股子公司性能测试培训.

  9. Java中利用BigInteger类进行大数开方

    在Java中有时会用到大数据,基本数据类型的存储范围已经不能满足要求了,如要对10的1000次方的这样一个数据规模的数进行开方运算,很明显不能直接用Math.sqrt()来进行计算,因为已经溢出了. ...

  10. Maven项目热部署到Tomcat容器下

    第一步: 配置Tomcat的登陆的用户名与密码     在 apache-tomcat-7.0.33\conf\ tomcat-users.xml,第40行添加如下: <role rolenam ...