组件通讯包括:父子组件间的通信和兄弟组件间的通信。在组件化系统构建中,组件间通信必不可少的。

父组件--> 子组件

1. 属性设置

父组件关键代码如下:

<template>
<Child :child-msg="msg"></Child>
</template>

子组件关键代码如下:

export default {
name: 'child',
props: {
child-msg: String
}
};

child-msg 为父组件给子组件设置的额外属性值,属性值需在子组件中设置props,子组件中可直接使用child-msg变量。

2. 子组件调用父组件

子组件通过 $parent 获得父组件,通过 $root 获得最上层的组件。

子组件--> 父组件

1. 发送事件/监听事件

子组件中某函数内发送事件:

this.$emit('toparentevent', 'data');

父组件监听事件:

<Child :msg="msg" @toparentevent="todo()"></Child>

toparentevent 为子组件自定义发送事件名称,父组件中@toparentevent为监听事件,todo为父组件处理方法。

2. 父组件直接获取子组件属性或方法

给要调用的子组件起个名字。将名字设置为子组件 ref 属性的值。

<!-- 子组件。 ref的值是组件引用的名称 -->
<child-component ref="aName"></child-component>

父组件中通过 $refs.组件名 来获得子组件,也就可以调用子组件的属性和方法了。

var child = this.$refs.aName
child.属性
child.方法()

父组件通过 $children 可以获得所有直接子组件(父组件的子组件的子组件不是直接子组件)。需要注意 $children 并不保证顺序,也不是响应式的。

Bus中央通信

目前中央通信是解决兄弟间通信,祖父祖孙间通信的最佳方法,不仅限于此,也可以解决父组件子组件间的相互通信。如下图:

各组件可自己定义好组件内接收外部组件的消息事件即可,不用理会是哪个组件发过来;而对于发送事件的组件,亦不用理会这个事件到底怎么发送给我需要发送的组件。

先设置Bus

//bus.js
import Vue from 'vue'
export default new Vue();
 

组件内监听事件:

import bus from '@/bus';

export default {
name: 'childa',
methods: {
},
created() {
bus.$on('childa-message', function(data) {
console.log('I get it');
});
}
};

发送事件的组件:

import bus from '@/bus';
//方法内执行下面动作
bus.$emit('childa-message', this.data);

Bus中央通信的方案各种情况下都可用,比较方便,具体内在原理后续更新说明。

vue组件之间的通信, 父子组件通信,兄弟组件通信的更多相关文章

  1. angular组件之间的通讯

    组件通讯,意在不同的指令和组件之间共享信息.如何在两个多个组件之间共享信息呢. 最近在项目上,组件跟组件之间可能是父子关系,兄弟关系,爷孙关系都有.....我也找找了很多关于组件之间通讯的方法,不同的 ...

  2. vue单文件组件形成父子(子父)组件之间通信(vue父组件传递数据给子组件,子组件传递数据给父组件)

    看了很多文章,官网文档也有看,对父子组件通信说的不是很明白:决定自己总结一下: vue一般都使用构建工具构建项目:这样每个组件都是单文件组件:而网上很多文章都是script标签方式映入vue,组件通信 ...

  3. 使用reflux进行react组件之间的通信

    前言 组件之间为什么要通信?因为有依赖. 那么,作为React组件,怎么通信? React官网说, 进行 父-子 通信,可以直接pass props. 进行 子-父 通信,往父组件传给子组件的函数注入 ...

  4. js组件之间的通信

    应用场景: 1.在刷微博的时候,滑到某个头像上,会出现一张usercard(用户名片), 微博列表区有这个usercard, 推荐列表也有这个usercard,评论区也有. 2.在网上购物时,购物车安 ...

  5. Vue2不使用Vuex如何实现兄弟组件间的通信

    在一些正规的大型项目的企业级开发过程中我们一般会引入Vuex来对Vue所有组件进行状态管理,可以轻松实现各组件间的通信.但是有时候做做自己的小项目,没有必要使用Vuex时,如何简单的实现组件间的通信? ...

  6. Vue基础知识之组件及组件之间的数据传递(五)

    vue中的组件是自定的标签,可以扩展的原生html元素,封装可复用的代码 note: 1.在标签命中不要使用大写,标签名字必须用短横线隔开 2.模板中只能有一个根元素,不能使用并列标签. 定义组件 全 ...

  7. Vue中独立组件之间数据交互

    独立组件之间数据交互:通过自定义事件 组件A中的[数据],传递给组件B 1.创建组件A,组件B 2.组件B在实例创建完成时就开始监听事件[等待接收数据]:钩子 3.组件A中触发事件,发送数据 注意:接 ...

  8. 创建组件的方法,组件的props属性、state属性的用法和特点,父子组件传值,兄弟组件传值

    1.创建组件的方法   函数组件   class组件 1.1 函数组 无状态函数式组件形式上表现为一个只带有一个 `render()` 方法的组件类,通过函数形式或者 `ES6` 箭头 `functi ...

  9. 面向UI编程:ui.js 1.1 使用观察者模式完成组件之间数据流转,彻底分离组件之间的耦合,完成组件的高内聚

    开头想明确一些概念,因为有些概念不明确会导致很多问题,比如你写这个框架为什么不去解决啥啥啥的问题,哎,心累. 什么是框架? 百度的解释:框架(Framework)是整个或部分系统的可重用设计,表现为一 ...

  10. Angular学习笔记之组件之间的交互

    1.@Input:可设置属性 当它通过属性绑定的形式被绑定时,值会“流入”这个属性. 在子组件中使用,例如:@Input()name:string 父组件定义宾亮,并在父组件的模板中绑定,例如: 子组 ...

随机推荐

  1. SP4546 ANARC08A - Tobo or not Tobo IDA*

    题意:

  2. Comet OJ - Contest #11 A 水题

    Code: #include <bits/stdc++.h> #define N 3000000 using namespace std; char str[N]; int main() ...

  3. DP(第一版)

    序 任何一种具有递推或者递归形式的计算过程,都叫做动态规划 如果你一开始学的时候就不会DP,那么你在考试的时候就一定不会想到用动态规划! 需要进行掌握的内容 1)DP中的基本概念 2)状态 3)转移方 ...

  4. python sqlite3查询表记录

    1.查询数据库log_info表最后10条记录. desc - 指"降序" 解决的方法是:按照ID 逆序排列,选取前10个 select * from 'log_info' ord ...

  5. linux虚拟机安装centos6.x

    安装系统,作为每一个it技术控们的基本功,对于各位大神和技术大牛们应该是易如反掌或者是家常便饭啦,都是从无数次安装,重装,刷机中一步步走来的.那么今天,我也分享一套装机教程,共各位和我一样的小白参考或 ...

  6. python能用来做什么?这3大主要用途你一定要知道!(实用)

    导读:如果你想学Python,或者你刚开始学习Python,那么你可能会问:“我能用Python做什么?” 这个问题不好回答,因为Python有很多用途. 但是随着时间,我发现有Python主要有以下 ...

  7. OUC_Summer Training_ DIV2_#13 723afternoon

    A - Shaass and Oskols Time Limit:2000MS     Memory Limit:262144KB     64bit IO Format:%I64d & %I ...

  8. 之前有面试到两个日期的大小比较方式,现在整理一下几种方法。   例子:   String beginTime=new String("2017-06-09 10:22:22");     String endTime=new String("2017-05-08 11:22:22");  1  直接用Date自带方法before()和after()比较 SimpleDateFormat d

    各种数据类型(日期/时间.integer.floating point和numeric)转换成格式化的字符串以及反过来从格式化的字符串转换成指定的数据类型.下面列出了这些函数,它们都遵循一个公共的调用 ...

  9. ycache中redis主备功能设计及使用说明

    方案概述: 对于ycache-client,如下图,在一致性hash环上的每个节点都有一个备用的节点.正常情况下slave节点不参与key的分配(冷备).只有当master挂了,ycache clie ...

  10. Android跨进程通信Content Provider

    Content Provider ContentProvider在android中的作用是对外共享数据,也就是说你可以通过ContentProvider把应用中的数据共享给其他应用访问,其他应用可以通 ...