vue的父子组建之间的通信(-),基于props和$emit之间的传递
对于vue而言,以为其核心思想为前端组建化。所以组建之间的通信必不可少。
相信接触过Angularjs的童鞋都知道angularjs的控制器之间的通信机制。
1:父传子:官方的$broadcast()广播的机制,发送广播,它可以向下传递数据,比如,父控制器向子控制器传递数据,或者 $rootScope 向任意控制器传递数据。
2:子传父:$emit();触发事件,它可以向上传递数据,比如,子控制器向父控制器,还有控制器向 $rootScope
3:创建服务,借助第三方的服务机制,依赖注入进需要的地方
对于vue而言,保留了angularjs的一些思想。比如$emit()和$on()监听事件。
废话不多说,直接上代码吧
一:父组建传子组建:比如要把swiperImg的数据通过props的形式传递给子组建。如下图
二:子组建传父组建:子组建接到父组建的值以后修改了并且需要回传给父组建就通过$emit()的触发事件形式来监听
以上完全是个人观点。如有不对请及时批评指正。
下次写基于vuex的状态管理机制的组建间传值。其实也就是和angularjs里面自定义服务的机制有点类似。
vue的父子组建之间的通信(-),基于props和$emit之间的传递的更多相关文章
- 详细讲解vue.js里的父子组件通信(props和$emit)
在进入这个话题之前,首先我们先来想一下在vue里,如何写一个父子组件.为了简单起见,下面的代码我都没用脚手架来构建项目,直接在html文件里引入vue.js来作为例子.父子组件的写法如下: <d ...
- vue---父子组件之间的通信【props,$refs、$emit】
在用vue进行项目开发的时候,父子组件之间的通信是经常被用到的,下面就来具体说说父子组件通信的三种方式: 父组件: <template> <div> <h1>我是父 ...
- VUE 父子组件之间通信传值 props和 $emit
1.父组件传值给子组件 $props,子组件传值给父组件 $emit 父组件 <div id="app" > <tr ...
- 【Vue组件通信】props、$ref、$emit,组件传值
1.什么是组件通信 组件间如何通信,也就成为了vue中重点知识,组件通信,涉及到组件之间数据的传递.类似NET POST/GET参数传递. Vue基本的三种传递方式** (props.\(ref.\) ...
- Python_架构、同一台电脑上两个py文件通信、两台电脑如何通信、几十台电脑如何通信、更多电脑之间的通信、库、端口号
1.架构 C/S架构(鼻祖) C:client 客户端 S:server 服务器 早期使用的一种架构,目前的各种app使用的就是这种架构,它的表现形式就是拥有专门的app. B/S架构(隶属于C/ ...
- day34——僵尸进程和孤儿进程、互斥锁、进程之间的通信
day34 僵尸进程和孤儿进程 基于unix环境(linux,macOS) 主进程需要等待子进程结束之后,主进程才结束 主进程时刻监测子进程的运行状态,当子进程结束之后,一段时间之内,将子进程进行回收 ...
- 基础学习day12--多线程一线程之间的通信和常用方法
一.线程之间的通信 1.1.线程之间的通信方法 多个线程在处理统一资源,但是任务却不同,这时候就需要线程间通信. 等待/唤醒机制涉及的方法: 1. wait():让线程处于冻结状态,被wa ...
- Vue 组件&组件之间的通信 之 非父子关系组件之间的通信
Vue中不同的组件,即使不存在父子关系也可以相互通信,我们称为非父子关系通信: 我们需要借助一个空Vue实例,在不同的组件中,使用相同的Vue实例来发送/监听事件,达到数据通信的目的: 实例: 初始加 ...
- Vue 组件&组件之间的通信 父子组件的通信
在Vue的组件内也可以定义组件,这种关系成为父子组件的关系: 如果在一个Vue实例中定义了component-a,然后在component-a中定义了component-b,那他们的关系就是: Vue ...
随机推荐
- vue 前端框架 (三)
VUE 生命周期 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...
- Spring Cloud 2-Bus 消息总线(九)
Spring Cloud Bus 1.服务端配置 pom.xml application.yml 2.客户端配置 pom.xml application.yml Controller.java 3 ...
- QT学习之如何在QToolBar中添加带图标的QToolButton并设置图标大小
在网上查到了三种方法,找到一种比较好理解的. 使用QIcon类: QToolButton *toolBtn1 = new QToolButton(this); //创建QToolButton tool ...
- 关于npm镜像,发布,内网搭建等
npm config set registry http://registry.npmjs.org npm config set registry https://registry.npm.taoba ...
- Codeforces Round #352 (Div. 2) (A-D)
672A Summer Camp 题意: 1-n数字连成一个字符串, 给定n , 输出字符串的第n个字符.n 很小, 可以直接暴力. Code: #include <bits/stdc++.h& ...
- USB鼠标键盘数据格式以及按键键值
鼠标发送给PC的数据每次4个字节 BYTE1 BYTE2 BYTE3 BYTE4 定义分别是: BYTE1 -- |--bit7: 1 表示 Y 坐标的变化量超出-256 ...
- java常用类:1。包装类(以Integer类为例)2.String类 3.StringBuffer
包装类 把八大基本数据类型封装到一个类中,并提供属性和方法,更方便的操作基本数据类型. 包装类的出现并不是用于取代基本数据类型,也取代不了. 包装类位于java.lang包中. Number 类 N ...
- oracle INS-13001 环境不满足最低要求
使用windows10等系统安装oracle 11g等版本的数据库时,经常会发现开始安装时弹出[INS-13001 环境不满足最低要求]的提示,此时可以点击[是]继续安装. 也可以点击[否]结束安装, ...
- pip安装mysql-python报错:Command "python setup.py egg_info" failed with error code 1 in /tmp/pip-install-enRreC/mysql-python/
公司业务开发,用python开发网站;需要使用模块MySQLdb. 我直接pip install MySQLdb,当然不成功了,模块名字因该是mysql-python pip install mysq ...
- MySQL/Oracle数据库优化总结
MySQL数据库优化的八种方式 1.选取最适用的字段属性 MySQL可以很好的支持大数据量的存取,但是一般说来,数据库中的表越小,在它上面执行的查询也就会越快.因此,在创建表的时候,为了获得更好的性能 ...