总结：
父组件--》子组件
①通过属性
步骤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. gcc编译动态链接库

    以下是windows环境下用gcc编译动态链接库的尝试过程. 环境准备 编译使用的MinGW,64位的官网可以找到下载地址. 项目建立及代码编写 在任意地方新建一个目录,保存这个项目,然后新建一个c源 ...

  2. Java 缓存池（使用Map实现）

    之前只是听说过缓存池,也没有具体的接触到,今天做项目忽然想到了用缓存池,就花了一上午的时间研究了下缓存池的原理,并实现了基本的缓存池功能. /** * 缓存池 * @author xiaoquan * ...

  3. 基于 maven 实现跨平台编译 protobuf 文件

    基于 maven 实现跨平台编译 protobuf 文件 mavne protobuf .proto  跨平台  需求 在团队协作中使用 protobuf 时, 有以下几点需求: protoc 跨平台 ...

  4. Docker(六)：Dockerfile命令详解

    Dockerfile 指令详解 1 FROM 指定基础镜像 FROM 指令用于指定其后构建新镜像所使用的基础镜像.FROM 指令必是 Dockerfile 文件中的首条命令,启动构建流程后,Docke ...

  5. c++ copy和operator =

    目录(?)[+] 构造函数 拷贝构造函数 赋值函数   C++中一般创建对象,拷贝或赋值的方式有构造函数,拷贝构造函数,赋值函数这三种方法.下面就详细比较下三者之间的区别以及它们的具体实现 1.构造函 ...

  6. 【leetcode】689. Maximum Sum of 3 Non-Overlapping Subarrays

    题目如下: In a given array nums of positive integers, find three non-overlapping subarrays with maximum ...

  7. 【leetcode】1125. Smallest Sufficient Team

    题目如下: In a project, you have a list of required skills req_skills, and a list of people.  The i-th p ...

  8. A1006

    输入n行员工id以及到达和离开的时间,输出最早到达的员工的id和最晚离开的员工的id 注:字符串赋值函数strcpy(目标字符串,原字符串)字符串之间的赋值使用该函数,需要#include<st ...

  9. Lambda表达式匿名类实现接口方法

    Lamb表达式匿名类实现接口方法 import java.util.ArrayList; public class HandlerDemo{ public static void main(Strin ...

  10. 实战build-react（三）+ style-components

    npm install --save style-components https://www.jianshu.com/p/27788be90605(copy) "axios": ...