上一节说到，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. Python:数字类型和字符串类型的内置方法

    一.数字类型内置方法 1.1 整型的内置方法 作用 描述年龄.号码.id号 定义方式 x = 10 x = int('10') x = int(10.1) x = int('10.1') # 报错 内 ...

  2. Android4.4 RIL短信接收流程分析

    最近有客户反馈Android接收不到短信,于是一头扎进RIL里面找原因.最后发现不是RIL的问题,而是BC72上报短信的格式不对,AT+CNMA=1无作用等几个小问题导致的.尽管问题不在RIL,但总算 ...

  3. 2019年Java面试题基础系列228道（2）

    21.描述一下 JVM 加载 class 文件的原理机制? JVM 中类的装载是由类加载器(ClassLoader)和它的子类来实现的,Java 中的类加载器是一个重要的 Java 运行时系统组件,它 ...

  4. 【AGC028D】Chord

    Problem Description 给定一个圆,圆上均等地放着 \(2n\) 个点,已有 \(k\) 对点之间连好了边,从中选择剩下 \(n-k\) 对点随意连边. 求所有连边方案中,联通块的个数 ...

  5. 3.java基础之关键字instanceof

    1. instanceof 使用:对象引用名 instanceof 类名 作用:来判读引用的对象和类名是否兼容(是否继承该类,或爷爷辈的类) 例子: Team team = new Team(); t ...

  6. 《C#并发编程经典实例》学习笔记—2.9 处理 async void 方法的异常

    问题 需要处理从 async void 方法传递出来的异常. 解决方案 书中建议尽量不写 async void 这样的方法,如果非写不可,建议在方法内部 try catch 所有的代码,即在方法内部处 ...

  7. node-sass 埋坑记录

    node-sass 埋坑记录 背景 原有项目.环境: node:v8.16.2 npm:v6.4.1 node-sass::v4.8.0 Angular-CLI:v6.x 本机没有安装 Visual ...

  8. Html5 小游戏 俄罗斯方块

    导言 在一个风和日丽的一天,看完了疯狂HTML 5+CSS 3+JavaScript讲义,跟着做了书里最后一章的俄罗斯方块小游戏,并做了一些改进,作为自己前端学习的第一站. 游戏效果: 制作思路 因为 ...

  9. 搭建Nginx四层反向代理

    需求背景: 前段时间公司因为业务需求需要部署一个正向代理,我已经分享出来了https://www.cnblogs.com/Dfengshuo/p/11911406.html,现有因架构个更改,需要再加 ...

  10. zabbix批量清理模板，添加新模板

    import requests import json import sys def get_token(): data = { "jsonrpc": "2.0" ...