前言

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快速上手(组件间的通信)的更多相关文章

  1. Vue.JS快速上手(组件生命周期)

    一.什么是组件 组成网页独立功能基本单元(片段), 复用.维护.性能, Vue.js中的组件就是一个Vue的实例,Vue中的组件包含data/methods/computed. 一个Vue.js的应用 ...

  2. Vue.JS快速上手(指令和实例方法)

    1.声明式渲染 首先,我们要知道Vue是声明式渲染,那啥是声明式渲染,我们只需要告诉程序我们想要什么结果,其他的交给程序来做.与声明式渲染相对的是命令式渲染,即命令我们的程序去做什么,程序就会跟着你的 ...

  3. Vue.JS快速上手(Vue-router 实现SPA 开发)

    一.什么是路由 URL -> 映射 -> 组件 Hash+onhashchange History.pushstate+replaceState+onpopstate 二.准备工作 组件 ...

  4. Vue.js学习 Item11 – 组件与组件间的通信

    什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有 ...

  5. 第四节:Vue表单标签和组件的基本用法,父子组件间的通信

    vue表单标签和组件的基本用法,父子组件间的通信,直接看例子吧. <!DOCTYPE html> <html> <head> <meta charset=&q ...

  6. 转: Vue.js——60分钟组件快速入门(上篇)

    转自: http://www.cnblogs.com/keepfool/p/5625583.html Vue.js——60分钟组件快速入门(上篇)   组件简介 组件系统是Vue.js其中一个重要的概 ...

  7. Vue – 基础学习(2):组件间 通信及参数传递

    Vue – 基础学习(2):组件间 通信及参数传递

  8. Vue.js 快速入门

    什么是Vue.js vue是法语中视图的意思,Vue.js是一个轻巧.高性能.可组件化的MVVM库,同时拥有非常容易上手的API.作者是尤雨溪,写下这篇文章时vue.js版本为1.0.7 准备 我推荐 ...

  9. Vue.js 的精髓——组件

    开篇:Vue.js 的精髓——组件 写在前面 Vue.js,无疑是当下最火热的前端框架 Almost,而 Vue.js 最精髓的,正是它的组件与组件化.写一个 Vue 工程,也就是在写一个个的组件. ...

随机推荐

  1. springMVC-3-获取参数

    RequestMapping修饰类 源码: 根据源码可以知道,requestmapping既可以修饰方法也可以修饰类 @Target({ElementType.METHOD, ElementType. ...

  2. Solon 1.5.16 发布,多项细节优化

    Solon 是一个轻量的Java基础开发框架.强调,克制 + 简洁 + 开放的原则:力求,更小.更快.更自由的体验.支持:RPC.REST API.MVC.Job.Micro service.WebS ...

  3. 线程Thread中的方法详解(二)

    1.start() start()方法的作用讲得直白点就是通知"线程规划器",此线程可以运行了,正在等待CPU调用线程对象得run()方法,产生一个异步执行的效果.通过start( ...

  4. 本地项目的npm安装方法

    有些node项目如一些工具类的项目,安装以后通过命令行执行其功能.但是而对于本地自建的项目如何通过npm安装,然后通过命令行(项目定义了命令行)工具执行命令调用其功能呢? 对于这种情况,笔者主要通过两 ...

  5. Spring Cloud 从入门到精通(一)Nacos 服务中心初探

     什么是Nacos? Nacos是阿里巴巴开源的项目,是一个更易于帮助构建云原生应用的动态服务发现.配置管理和服务管理平台.英文全称 Dynamic Naming and Configuration ...

  6. 第三篇 -- IDEA 创建Springboot Web项目并用Jmeter测试

    上一节使用Django写的一个接口程序,这一节讲用IDEA配合Springboot创建web项目.一个是python,一个是java. 参考链接:http://www.uxys.com/html/Ja ...

  7. Redis内部阻塞式操作有哪些?

    Redis实例在运行的时候,要和许多对象进行交互,这些不同的交互对象会有不同的操作.下面我们来看看,这些不同的交互对象以及相应的主要操作有哪些. 客户端:键值对的增删改查操作. 磁盘:生成RDB快照. ...

  8. NOIP&CSP PJ 难度刷题记录

    前言 本来不想写前言的(>人<:) 这只是 mjl 给我们布置的作业,并不是我自己在刷题! 不保证所有代码的正确性,它们仅仅是通过了所有数据点而已. 1.模拟板块 整体难度:红~黄(模拟不 ...

  9. 并发编程——Java线程的6种状态及切换

    前言 本次主要分享一下Java线程的六种状态及其转换. 如果对于线程的创建方式不太了解,推荐观看并发编程--认识java里的线程 线程的状态及其转换 操作系统线程的五种状态 新建(NEW) 就绪(RU ...

  10. Python实现猜数字游戏

    Python中实现猜数字游戏代码如下: import random # 引入随机数标准库-random # 定义数字上下限和最大游戏次数 min_num = 1 max_num = 10 guess_ ...