总结：
父组件--》子组件
①通过属性
步骤1：
<son myName="michael" myPhone='123'></son>
<son :myName="userList[0]"></son>
步骤2：
Vue.component('son',{
　　props:['myName','myPhone']
})
②通过$parent
直接在子组件中通过this.$parent得到调用子组件的父组件

子组件--》父组件
①events up
步骤1：在父组件中 调用子组件的时候 绑定一个自定义事件 和 对应的处理函数
methods:{
　　recvMsg:function(msg){
　　//msg就是传递来的数据
　　}
}，
template:'
<son @customEvent="recvMsg"></son>
'

步骤2：在子组件中 把要发送的数据通过触发自定义事件传递给父组件
this.$emit('customEvent',123)

②$refs

reference 引用
步骤1：在调用子组件的时候 可以指定ref属性
<son ref='zhangsan'></son>
步骤2：通过$refs得到指定引用名称对应的组件实例
this.$refs.zhangsan

兄弟组件通信
步骤1：创建一个Vue的实例 作为事件绑定触发的公共的对象
var bus = new Vue();
步骤2：在接收方的组件 绑定 自定义的事件
bus.$on('customEvent',function(msg){
　　//msg是通过事件传递来的数据 (传递来的123)
});
步骤3：在发送方的组件 触发 自定义的事件
bus.$emit('customEvent',123);

每日一练：

创建2个组件，main-component,son-component

视图：
main-component 显示一个按钮
son-component 显示一个p标签

功能：
main-component 定义一个变量count,初始化为0，将count传递给son-component,son-component接收到数据显示在p标签中

main-component 在点击按钮时，实现对count的自增操作，要求son-component能够实时显示count对应的数据

son-component在接收到count之后，在count大于10的时候，将main-component的按钮禁用掉
（参考：<button v-bind:disabled="!isValid">clickMe</button>）

<!doctype html>

<html>

 <head>

  <meta charset="UTF-8">

  <title>小练习</title>

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

 </head>

 <body>

  <div id="container">

        <p>{{msg}}</p>

        <main-component></main-component>

    </div>

    <script>

    /*

        每日一练：

创建2个组件，main-component,son-component

视图：

 main-component 显示一个按钮

 son-component 显示一个p标签

功能：

    main-component 定义一个变量count,初始化为0，将count传递给son-component,son-component接收到数据显示在p标签中

    main-component 在点击按钮时，实现对count的自增操作，要求son-component能够实时显示count对应的数据

    son-component在接收到count之后，在count大于10的时候，将main-component的按钮禁用掉

    （参考：<button v-bind:disabled="!isValid">clickMe</button>）

    */

//创建父组件

        Vue.component("main-component",{

            data:function(){

                return {

                    count:0,

                    isDisabled:true

                }

            },

            methods:{

                //点击按钮对count进行自增

                //并通过$emit触发countAdd,并把count的值传递给子组件

                //判断count==10的时候让按钮禁用

                countAdd:function(){

                    this.count++;

                    console.log("对数据进行自增："+this.count);

                    this.$emit("countAdd",this.count);

                }

            },

            template:`

                <div>

                    <button @click="countAdd" v-bind:disabled="!isDisabled">点我</button>

                    <son-component v-bind:myCount="count"></son-component>

                </div>

            `

        })

//创建子组件

        Vue.component("son-component",{

            //通过props接收父组件传递过来的值

            props:["myCount"],

            template:`

                <div>

                    <p>{{myCount}}</p>

                </div>

            `,

            //数据更新完成后判断从父组件拿到的值

            updated:function(){

                if(this.myCount>10){

                    //子组件通过$parent直接获取父组件的数据

                        this.$parent.isDisabled = false;

                    }

            }

        })

        new Vue({

            el:"#container",

            data:{

                msg:"Hello VueJs"

            }

        })

    </script>

 </body>

</html>

vue组件之间通信总结---点赞的更多相关文章

  1. 前端面试 vue 部分 (5)——VUE组件之间通信的方式有哪些

    VUE组件之间通信的方式有哪些(SSS) 常见使用场景可以分为三类: 父子通信: null 父向子传递数据是通过 props ,子向父是通过 $emit / $on $emit / $bus Vuex ...

  2. Vue 组件之间通信 All in One

    Vue 组件之间通信 All in One 组件间通信 1. 父子组件之间通信 https://stackblitz.com/edit/vue-parent-child-commutation?fil ...

  3. vue组件之间通信传值

    原文链接:https://blog.csdn.net/lander_xiong/article/details/79018737 我认为这位博主的这篇文章写的非常详细,通俗易懂, 我们这次的vue项目 ...

  4. vue组件之间通信总结(超详细)

    组件通信在我们平时开发过程中,特别是在vue和在react中,有着举足轻重的地位.本篇将总结在vue中,组件之间通信的几种方式: props.$emit $parent.$children $attr ...

  5. Vue组件之间通信的三种方式

    最近在看梁颠编著的<Vue.js实战>一书,感觉颇有收获,特此记录一些比价实用的技巧. 组件是MVVM框架的核心设计思想,将各功能点组件化更利于我们在项目中复用,这类似于我们服务端面向对象 ...

  6. vue组件之间通信的8种方式

    对于vue来说,组件之间的消息传递是非常重要的,下面是我对组件之间消息传递的常用方式的总结. props和$emit(常用) $attrs和$listeners 中央事件总线(非父子组件间通信) v- ...

  7. Vue组件之间通信

    vue组件传值有以下几种情况: 父组件向子组件传值.子组件向父组件传值.兄弟组件之间传值等 一.父组件向子组件传值: 传值方式: props <father> // 动态传递值 <s ...

  8. vue 组件之间通信

    父传子 **父组件代码** <template> <header-box :title-txt="showTitleTxt"></header-box ...

  9. 【Vue课堂】Vue.js 父子组件之间通信的十种方式

    这篇文章介绍了Vue.js 父子组件之间通信的十种方式,不管是初学者还是已经在用 Vue 的开发者都会有所收获.无可否认,现在无论大厂还是小厂都已经用上了 Vue.js 框架,简单易上手不说,教程详尽 ...

随机推荐

  1. 如何配置SQL Server数据库远程连接

    本地数据库(SQL Server 2012或以上) 连接外网服务器的数据库,外网的服务器端需要做如下配置: 1.首先是要打开 数据的配置管理工具 2.配置相关的客户端协议,开启TCP/IP 3.数据库 ...

  2. Fiddler抓包的简单使用

    Fiddler抓包的简单使用 参考的博客文章:玲虫师的<Fiddler抓包[5]_Fiddler过滤>. (1)使用fiddler进行过滤,只抓取需要的网络请求. 点击右侧菜单中的[Fil ...

  3. zabbix命令之：zabbix_sender命令

    zabbix server除了可以从客户端主动获取数据,客户端也可以主动将数据推送给服务端,客户端通过zabbix_sender指令来实现向服务端主动推送数据. 在zabbix客户端安装 配置yum源 ...

  4. TJOI2017DNA

    P3763 [TJOI2017]DNA 字符串匹配,字符集大小为\(4\),认为相差不超过\(3\)即合法. 对每一种字符分开考虑不同产生的贡献. 对于串\(S\),如果当前位置相同则\(S_i=1\ ...

  5. MyBatis：Parameter Maps collection does not contain value for 的问题解决

    Result Maps collection does not contain value for   frontpreviewprofitManage.cdata 出现上述错误 主要是因为你的sel ...

  6. Python---webserver3

    一.v07-添加路由功能 - 路由:能够理解请求并按照请求调用相应处理函数的模块 - 理解请求内容 - 能够调用或者指定相应业务处理模块 - 算法: - 按行读取传入报文 - 假如报文能用空格分割成三 ...

  7. 014：Django内置的URL转换器

    Django内置的URL转换器: 上节中我们说了URL中传参的情况,传递参数是通过 <> 尖括号来进行指定的.并且在传递参数的时候,可以指定这个参数的数据类型,比如文章的 id 都是 in ...

  8. c++常见函数记录

    1.bitsset 模板,可以操作二进制字符串,转化成数字等 2.swap()交换函数,将a,b的值交换 3.stringstream类用于字符串和其他类型的转换,操作方便 4.stx,tr1. 5. ...

  9. vue2.0关于添加属性后视图不能更新的问题

    属性赋值和this.$set 和vue.$set方法我不行 可以用 this.$delete来进行删除后在设置都可以了

  10. angular-seed — AngularJS种子项目

    AngularJS Seed 是典型 AngularJS web 应用的应用骨架,可以快速启动你的 AngularJS webapp 项目和这些项目的开发环境. AngularJS Seed 包括一个 ...