对于vue而言,以为其核心思想为前端组建化。所以组建之间的通信必不可少。

相信接触过Angularjs的童鞋都知道angularjs的控制器之间的通信机制。

1:父传子:官方的$broadcast()广播的机制,发送广播,它可以向下传递数据,比如,父控制器向子控制器传递数据,或者 $rootScope 向任意控制器传递数据。

2:子传父:$emit();触发事件,它可以向上传递数据,比如,子控制器向父控制器,还有控制器向 $rootScope

3:创建服务,借助第三方的服务机制,依赖注入进需要的地方

对于vue而言,保留了angularjs的一些思想。比如$emit()和$on()监听事件。

废话不多说,直接上代码吧

一:父组建传子组建:比如要把swiperImg的数据通过props的形式传递给子组建。如下图

                 

二:子组建传父组建:子组建接到父组建的值以后修改了并且需要回传给父组建就通过$emit()的触发事件形式来监听

            

以上完全是个人观点。如有不对请及时批评指正。

下次写基于vuex的状态管理机制的组建间传值。其实也就是和angularjs里面自定义服务的机制有点类似。

vue的父子组建之间的通信(-),基于props和$emit之间的传递的更多相关文章

  1. 详细讲解vue.js里的父子组件通信(props和$emit)

    在进入这个话题之前,首先我们先来想一下在vue里,如何写一个父子组件.为了简单起见,下面的代码我都没用脚手架来构建项目,直接在html文件里引入vue.js来作为例子.父子组件的写法如下: <d ...

  2. vue---父子组件之间的通信【props,$refs、$emit】

    在用vue进行项目开发的时候,父子组件之间的通信是经常被用到的,下面就来具体说说父子组件通信的三种方式: 父组件: <template> <div> <h1>我是父 ...

  3. VUE 父子组件之间通信传值 props和 $emit

    1.父组件传值给子组件 $props,子组件传值给父组件 $emit 父组件          <div id="app" >               <tr ...

  4. 【Vue组件通信】props、$ref、$emit,组件传值

    1.什么是组件通信 组件间如何通信,也就成为了vue中重点知识,组件通信,涉及到组件之间数据的传递.类似NET POST/GET参数传递. Vue基本的三种传递方式** (props.\(ref.\) ...

  5. Python_架构、同一台电脑上两个py文件通信、两台电脑如何通信、几十台电脑如何通信、更多电脑之间的通信、库、端口号

    1.架构 C/S架构(鼻祖) C:client  客户端 S:server  服务器 早期使用的一种架构,目前的各种app使用的就是这种架构,它的表现形式就是拥有专门的app. B/S架构(隶属于C/ ...

  6. day34——僵尸进程和孤儿进程、互斥锁、进程之间的通信

    day34 僵尸进程和孤儿进程 基于unix环境(linux,macOS) 主进程需要等待子进程结束之后,主进程才结束 主进程时刻监测子进程的运行状态,当子进程结束之后,一段时间之内,将子进程进行回收 ...

  7. 基础学习day12--多线程一线程之间的通信和常用方法

    一.线程之间的通信 1.1.线程之间的通信方法 多个线程在处理统一资源,但是任务却不同,这时候就需要线程间通信.    等待/唤醒机制涉及的方法:    1. wait():让线程处于冻结状态,被wa ...

  8. Vue 组件&组件之间的通信 之 非父子关系组件之间的通信

    Vue中不同的组件,即使不存在父子关系也可以相互通信,我们称为非父子关系通信: 我们需要借助一个空Vue实例,在不同的组件中,使用相同的Vue实例来发送/监听事件,达到数据通信的目的: 实例: 初始加 ...

  9. Vue 组件&组件之间的通信 父子组件的通信

    在Vue的组件内也可以定义组件,这种关系成为父子组件的关系: 如果在一个Vue实例中定义了component-a,然后在component-a中定义了component-b,那他们的关系就是: Vue ...

随机推荐

  1. IIS部署项目

    控制面板\所有控制面板项\管理工具-->Internet 信息服务(IIS)管理器 随便填个名称,项目的路径,选择一个新的端口.

  2. numpy数组取每一列的数据

    也可以运用到列表中,a原本是一个列表的嵌套,将a转为了数组进行此操作,可以取固定的值,这就是numpy的好处.

  3. WPF常见主界面的布局

    一.概述 效果图: 暂时没做完,请等待 二.实现 (一)实现无边框窗口 原文:WPF 窗口去除顶部边框(正宗无边框) ============================ 最近在做一个大屏展示视频 ...

  4. ftp上传或下载文件工具类

    FtpTransferUtil.java工具类,向ftp上传或下载文件: package utils; import java.io.File; import java.io.FileOutputSt ...

  5. oracle wallet使用与维护

    oracle wallet使用与维护2015年05月26日 17:58:55 SilenceRiver 阅读数:1614oracle wallet使用与维护---oracle无密码登录分类: Orac ...

  6. 卢卡斯定理——应用hdu4349

    #include<bits/stdc++.h> using namespace std; int n; int main(){ while(cin>>n){ ; while(n ...

  7. Django提交表单时遇到403错误:CSRF verification failed

    这个问题是由跨站点伪造请求(CRSF)造成的,要彻底的弄懂这个问题就要理解什么是CRSF,以及Django提供的CSRF防护机制是怎么工作的. 什么是CSRF CSRF, Cross Site Req ...

  8. inotify+rsync文件实时同步报错:usr/local/bin/inotifywait: error while loading shared libraries: libinotifytools.so.0:

    解决办法: ln -sv /usr/local/lib/libinotify* /usr/lib/ /usr/lib64/libinotifytools.so.

  9. MVC和MVP设计模式

    参考博客http://www.cnblogs.com/end/archive/2011/06/02/2068512.html ####MVC模式M:model 模型V:view 视图C:control ...

  10. linux目录的特点

    1./是所有目录的顶点. 2.目录结构像一颗倒挂的树 3.目录和磁盘分区,默认是木有关联的 4./不同的目录可能会对应不同的分区或磁盘 linux里设备如果不挂载是看不到入口的, 如果希望设备被访问, ...