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 ...
随机推荐
- go [第一篇]初识
[第一篇] 简介 Go 是一个开源的编程语言,它能让构造简单.可靠且高效的软件变得容易. Go是从2007年末由Robert Griesemer, Rob Pike, Ken Thompson主持开发 ...
- 找到多个与名为“Home”的控制器匹配的类型。解决方法
“/”应用程序中的服务器错误. 找到多个与名为“Home”的控制器匹配的类型.如果为此请求(“{controller}/{action}/{id}”)提供服务的路由没有指定命名空间以搜索与此请求相匹配 ...
- input子系统学习笔记六 按键驱动实例分析下【转】
转自:http://blog.chinaunix.net/uid-20776117-id-3212095.html 本文接着input子系统学习笔记五 按键驱动实例分析上接续分析这个按键驱动实例! i ...
- NB-IoT有三种部署方式及特点【转】
转自:http://blog.sina.com.cn/s/blog_13ddf053f0102wcbz.html NB-IoT有三种运营模式,一种是独立的在运营商的网络外面重做:第二种是在LTE的保护 ...
- DataTable插件通过js导出Excel
$('#myTab').DataTable( { serverSide: false,//分页,取数据等等的都放到服务端去. true为后台分页,每次点击分页时会请求后台数据,false为前台分页 d ...
- break退出循环分析
函数功能: 查找dest字符串中连续不包含在src字符串中的字符数量 1 #include<stdio.h> #include<stdlib.h> void strccspn( ...
- linux 服务器常用命令整理
linux 服务器常用命令整理 目录 网络分析 - tcpdump \ telnet \ (netstat \ ss \ lsof) \ nload 网络传输 - scp \ rsync \ (rz ...
- python的学习之路(二)
1.字符串内置功能练习#!/usr/bin/env python# *_*coding:utf-8 *_*# Author: harsonname = 'harson'name =str('harso ...
- js获取当前时间并实时刷新
效果如图: 代码如下: <html> <head> <title>js获取当前时间并实时刷新</title> <script> //页面加载 ...
- Git 的使用(皮毛))
1.安装git 软件(下一步直到完成) 2.码云注册(保存代码) 3.创建代码托管仓库 4.创建文件夹 5.写东西并提交到码云 1.在某个文件夹下写东西 2.写完之后在此文件夹下鼠标右键,并选择[gi ...