上一节说到，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. oopday02(面向对象-构造方法&静态static)

    面向对象之封装 01_面向对象(构造方法Constructor概述和格式) * A:构造方法概述和作用 * 给对象的数据(属性)进行初始化 * B:构造方法格式特点 * a:方法名与类名相同(大小也要 ...

  2. Linux上用IP转发使内部网络连接互联网

    IP转发的概念: 使 Linux 机器像路由器一样将数据从一个网络发送到另一个网络.所以,它能作为一个路由器或者代理服务器,实现将一个连接的互联网或者网络连接共享给多个客户端机器. 1. 启用 IPv ...

  3. Linux下快速手动产生core文件

    原文链接:https://blog.csdn.net/jctian000/article/details/79695006 当我们配置好自动生成core文件的环境后,若不想写导致崩溃的程序验证,那要怎 ...

  4. js解决客户端与服务器时间不一致的问题

    引出 最近在写一个项目时,要根据时间进行不同的展示,直接用new Date().getTime()获取当前时间,结果就出问题了.有些用户擅自修改自己的本地时间,导致获取到的时间并不是当前时间,尴尬. ...

  5. deepin镜像 mxlinux镜像 ubuntu镜像桌面版

    百度网盘https://pan.baidu.com/s/18HX4XgXRMXFho036tuP-Hw

  6. IT兄弟连 HTML5教程 CSS3属性特效 边框

    通过CSS3,我们能够创建圆角边框,向矩形添加阴影,使用图片来绘制边框.并且不需使用设计软件,比如photoshop. 1  边框图片border-image border-image为边框应用图片, ...

  7. 转pytorch中训练深度神经网络模型的关键知识点

    版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/weixin_42279044/articl ...

  8. WebShell代码分析溯源(六)

    WebShell代码分析溯源 一.一句话变形马样本 <?php call_user_func('assert', $_REQUEST['assert']); ?> 二.代码分析 1.分析代 ...

  9. JVM常用参数详解

     JVM整个堆大小=年轻代大小 + 年老代大小 + 持久代大小,在JDK1.8及之后的版本由于永久代被元空间替代,所以jdk1.8中的堆=年轻代大小 + 年老代大小.本文使用的是JDK1.8  1.堆 ...

  10. Java生鲜电商平台-生鲜电商中商品类目、属性、品牌、单位架构设计与实战

    Java生鲜电商平台-生鲜电商中商品类目.属性.品牌.单位架构设计与实战 说明:Java生鲜电商平台-生鲜电商中商品类目.属性.品牌.单位架构设计与实战经验分享 凡是涉及到购物,必然是建立在商品的基础 ...