Vue.JS快速上手(组件间的通信)
前言
Vue采用的是组件化思想,那么这些组件间是如何通信的呢?下面详细介绍一下。
所谓组件间通信,不单单是我们字面上理解的相互传递数据,这里还包括一个组件访问另一个组件的实例方法等,如父组件通过ref访问子组件实例成员,并实现传参。我们先来研究父子组件间是如何通信的。
一、父子组件通信
1. props实现父组件向子组件传递数据
父组件:
子组件:
2. $emit实现子组件向父组件传递数据
父组件:
子组件:
3.父组件通过ref访问子组件实例成员,并实现传参
父组件:
子组件:
总结一下,如果是数据传递的话:
父->子: props; 子->父: $emit
父组件通过ref访问子组件实例成员,并实现传参
二、兄弟组件间传递
什么是兄弟组件,也就是一个父组件下的多个子组件,他们之间如何实现数据传递呢?
1:通过父组件中介,进行数据传递
父组件:
子组件A:
子组件B:
2: 通过$parent访问父组件数据
父组件:
子组件A:
子组件B:
注意:A组件通过$emit传过来的值,在父组件定义后可以直接使用
3.总线模式(bus): 监听与订阅(事件)
1.在main.js添加vue类型原型属性, 使得所有vue实例(组件)都可以通过this来访问bus对象
2.谁调用谁就触发事件,将值往下传,下面的子子孙孙都可以通过$on接收
3.子组件监听Vue上的bus对象after-change,实现接收
三、陌生组件间数据传递
方案1:通过$root获取根组件实例
方案2:通过在Vue.prototype添加响应式对象
结尾
以上就是常用的组件通信方法,不过日常开发还是Vuex用的多一点,Vuex真正实现了共享数据,但这并不意味着Vuex就天下无敌了,要实现组件封装还是要用基本的方法来实现。
Vue.JS快速上手(组件间的通信)的更多相关文章
- Vue.JS快速上手(组件生命周期)
一.什么是组件 组成网页独立功能基本单元(片段), 复用.维护.性能, Vue.js中的组件就是一个Vue的实例,Vue中的组件包含data/methods/computed. 一个Vue.js的应用 ...
- Vue.JS快速上手(指令和实例方法)
1.声明式渲染 首先,我们要知道Vue是声明式渲染,那啥是声明式渲染,我们只需要告诉程序我们想要什么结果,其他的交给程序来做.与声明式渲染相对的是命令式渲染,即命令我们的程序去做什么,程序就会跟着你的 ...
- Vue.JS快速上手(Vue-router 实现SPA 开发)
一.什么是路由 URL -> 映射 -> 组件 Hash+onhashchange History.pushstate+replaceState+onpopstate 二.准备工作 组件 ...
- Vue.js学习 Item11 – 组件与组件间的通信
什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有 ...
- 第四节:Vue表单标签和组件的基本用法,父子组件间的通信
vue表单标签和组件的基本用法,父子组件间的通信,直接看例子吧. <!DOCTYPE html> <html> <head> <meta charset=&q ...
- 转: Vue.js——60分钟组件快速入门(上篇)
转自: http://www.cnblogs.com/keepfool/p/5625583.html Vue.js——60分钟组件快速入门(上篇) 组件简介 组件系统是Vue.js其中一个重要的概 ...
- Vue – 基础学习(2):组件间 通信及参数传递
Vue – 基础学习(2):组件间 通信及参数传递
- Vue.js 快速入门
什么是Vue.js vue是法语中视图的意思,Vue.js是一个轻巧.高性能.可组件化的MVVM库,同时拥有非常容易上手的API.作者是尤雨溪,写下这篇文章时vue.js版本为1.0.7 准备 我推荐 ...
- Vue.js 的精髓——组件
开篇:Vue.js 的精髓——组件 写在前面 Vue.js,无疑是当下最火热的前端框架 Almost,而 Vue.js 最精髓的,正是它的组件与组件化.写一个 Vue 工程,也就是在写一个个的组件. ...
随机推荐
- springMVC-3-获取参数
RequestMapping修饰类 源码: 根据源码可以知道,requestmapping既可以修饰方法也可以修饰类 @Target({ElementType.METHOD, ElementType. ...
- Solon 1.5.16 发布,多项细节优化
Solon 是一个轻量的Java基础开发框架.强调,克制 + 简洁 + 开放的原则:力求,更小.更快.更自由的体验.支持:RPC.REST API.MVC.Job.Micro service.WebS ...
- 线程Thread中的方法详解(二)
1.start() start()方法的作用讲得直白点就是通知"线程规划器",此线程可以运行了,正在等待CPU调用线程对象得run()方法,产生一个异步执行的效果.通过start( ...
- 本地项目的npm安装方法
有些node项目如一些工具类的项目,安装以后通过命令行执行其功能.但是而对于本地自建的项目如何通过npm安装,然后通过命令行(项目定义了命令行)工具执行命令调用其功能呢? 对于这种情况,笔者主要通过两 ...
- Spring Cloud 从入门到精通(一)Nacos 服务中心初探
什么是Nacos? Nacos是阿里巴巴开源的项目,是一个更易于帮助构建云原生应用的动态服务发现.配置管理和服务管理平台.英文全称 Dynamic Naming and Configuration ...
- 第三篇 -- IDEA 创建Springboot Web项目并用Jmeter测试
上一节使用Django写的一个接口程序,这一节讲用IDEA配合Springboot创建web项目.一个是python,一个是java. 参考链接:http://www.uxys.com/html/Ja ...
- Redis内部阻塞式操作有哪些?
Redis实例在运行的时候,要和许多对象进行交互,这些不同的交互对象会有不同的操作.下面我们来看看,这些不同的交互对象以及相应的主要操作有哪些. 客户端:键值对的增删改查操作. 磁盘:生成RDB快照. ...
- NOIP&CSP PJ 难度刷题记录
前言 本来不想写前言的(>人<:) 这只是 mjl 给我们布置的作业,并不是我自己在刷题! 不保证所有代码的正确性,它们仅仅是通过了所有数据点而已. 1.模拟板块 整体难度:红~黄(模拟不 ...
- 并发编程——Java线程的6种状态及切换
前言 本次主要分享一下Java线程的六种状态及其转换. 如果对于线程的创建方式不太了解,推荐观看并发编程--认识java里的线程 线程的状态及其转换 操作系统线程的五种状态 新建(NEW) 就绪(RU ...
- Python实现猜数字游戏
Python中实现猜数字游戏代码如下: import random # 引入随机数标准库-random # 定义数字上下限和最大游戏次数 min_num = 1 max_num = 10 guess_ ...