上一节说到，vue.js是允许子组件通过props接受父组件的信息，但是不允许父组件通过props接受子组件的信息

1. $emit()和on

当子组件需要向父组件传递数据时，就要用到自定义事件。
使用观察者模式，子组件用 $emit()来触发事件，父组件用 $on()来监昕子组件的事件 。
更常用的是: 父组件也可以直接在在子组件自定义标签上使用v-on来监听子组件触发的自定义事件。

2. bus：兄弟组件和跨多级组件通信

推荐使用一个空的 Vue 实例作为中央事件总线（ bus ）

3. this.$parent 可以直接访问该组件的父组件，父组件可以通过this.$children访问他所有的子组件，还可以使用ref来定义子组件的索引


设计原则:
子组件应该尽可能地避免依赖父组件的数据，更不应该去主动修改它的数据.
父子组件最好还是通过props 和 $emit 来通信。

4. 更好的状态管理解决方案vuex

Vue组件通信的几种方法的更多相关文章

  1. Vue中组件通信的几种方法（Vue3的7种和Vue2的12种组件通信）

    Vue3组件通信方式: props $emit expose / ref $attrs v-model provide / inject Vuex 使用方法: props 用 props 传数据给子组 ...

  2. vue组件通信的几种方式

    最近用vue开发项目,记录一下vue组件间通信几种方式 第一种,父子组件通信 一.父组件向子组件传值 1.创建子组件,在src/components/文件夹下新建一个Child.vue 2.Child ...

  3. vue跨组件通信的几种方法

    http://www.tuicool.com/articles/jyM32mA 在开发组件的时候,一定会遇到组件的通信,比如点击一个图标出现弹窗和蒙层,这三个分别是不同的组件.管理他们之间的状态就成了 ...

  4. vue必须掌握之组件通信（7种方法）

    方法一:$emit / props 父组件通过props的方式向子组件传递,子组件通过$emit触发父组件中v-on绑定的自定义事件 <!--父组件--> <template> ...

  5. Vue自定义组件以及组件通信的几种方式

    本帖子来源:小贤笔记 功能 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它 ...

  6. vue-learning：31 - component - 组件间通信的6种方法

    vue组件间通信的6种方法 父子组件通信 prop / $emit 嵌套组件 $attrs / $liteners 后代组件通信 provide / inject 组件实例引用 $root / $pa ...

  7. 黑马vue---56-58、vue组件创建的三种方式

    黑马vue---56-58.vue组件创建的三种方式 一.总结 一句话总结: 不论是哪种方式创建出来的组件,组件的 template 属性指向的模板内容,必须有且只能有唯一的一个根元素 1.使用 Vu ...

  8. Linux下进程通信的八种方法

    Linux下进程通信的八种方法:管道(pipe),命名管道(FIFO),内存映射(mapped memeory),消息队列(message queue),共享内存(shared memory),信号量 ...

  9. c#中实现串口通信的几种方法

    c#中实现串口通信的几种方法 通常,在C#中实现串口通信,我们有四种方法: 第一:通过MSCOMM控件这是最简单的,最方便的方法.可功能上很难做到控制自如,同时这个控件并不是系统本身所带,所以还得注册 ...

随机推荐

  1. c++-变量，this指针，全局函数，成员函数，自定义数组类

    区分变量属于哪个对象 c++对象管理模型初探 C++类对象中的成员变量和成员函数是分开存储的,C中内存四区仍然有效 C++编译器对普通成员函数的内部处理(隐藏this指针) this指针解决函数形参和 ...

  2. vue解惑之slot(插槽)

    一.插槽是个什么玩意,能吃吗 在vue中[插槽],从字面意思来看,插槽意味着[内容的增加],回到vue的使用场景,插槽就是[父组件调用子组件时,额外增加的内容]. 插槽显不显示.显示的内容是由父组件来 ...

  3. cesium 实现风场图效果(附源码下载)

    前言 cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材. 内 ...

  4. Android 音视频技术之录音获取实时音量

    一.实时音量相关基础知识 说到获取音量,大家首先想到的应该就是分贝(dB),分贝是一个相对单位(是一个比值,是一个数值,是一个纯计数方法). 在音频领域dB度量的是声音的强度,其计算的公式如下: 在上 ...

  5. 使用SQL生成指定数据库的数据字典(MSSQL)

    USE DBNAME --指定要生成数据字典的数据库 GO SELECT 表名= CASE WHEN a.colorder= 1 THEN d.name ELSE '' END, 表说明= CASE ...

  6. CentOS 7上的主机名设置和基本网络管理

    主机名 CentOS 6 查看. # hostname 设置. # hostname NEW_NAME 设置完成后,xshell的会话中不会显示NEW_NAME,可通过重新登录会话来显示.不过实际上我 ...

  7. 图像处理之C语言实现二维卷积

    在用C语言实现图像处理中,经常要用到二维卷积的运算,这个在matlab中是非常容易实现的,只需要conv2()就OK啦,而且速度非常的快.但是在C语言中就需要四层的for循环来实现了. 首先二维卷积的 ...

  8. Image 缩略图

    方法一:通过调用Image对象的自带方法GetThumbnailImage()进行图片转换. /// <summary> /// 生成缩略图重载方法,返回缩略图的Image对象 /// & ...

  9. MongoDB(三)：数据库操作、集合操作

    1. 数据库操作 看完前面的文章,大家应该把环境搭建好了,下面我们就开始学习MongoDB的一些基本操作了. 首先我们要了解的一些要点: MongoDB将数据存储为一个文档,数据结构由键值对(key= ...

  10. springboot整合web开发（整合servlet、filter、listener、访问静态、文件上传）

    整合servlet 1.继承HttpServlet 2.添加@WebServlet注解 @WebServlet(name="FirstServlet",urlPatterns=&q ...