上一节说到，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. MongoDB(七)：聚合aggregate

    1. 聚合aggregate 聚合主要用于计算数据,类似sql中的sum().avg() 语法: db.集合名称.aggregate([{管道:{表达式}}]) stu准备的数据: db.stu.in ...

  2. 不加班的秘诀：如何通过AOE快速集成NCNN?

    作为我司头发储量前三的程序员 始终仗着头发多奋斗在加班的第一线 时时灵魂拷问自己 年轻人,你凭什么不加班? 虽然我没有女朋友但是,我有代码呀 但我不明白的是,隔壁工位那个,到岗比我迟,下班比我早,天天 ...

  3. 静态方法staticmethod和类方法classmethod

    静态方法staticmethod和类方法classmethod 一.类方法classmethod 把一个方法变成一个类中的方法,这个方法可以直接利用类来调用,不需要依托任何的对象,即不需要实例化也可以 ...

  4. Selenium环境要配置浏览器驱动

    1.浏览器环境变量添加到path 2.将浏览器相应的驱动.exe复制到浏览器目录 3.这条就是让我傻逼似的配置一上午的罪魁祸首:将驱动.exe复制到python目录!!!! Selenium

  5. Ocelot网关在.Net Core 的使用

    1.  项目环境 .Net Core 2.2      Ocelot 13.5.2 2. 基本使用 * Nuget 安装 Ocelot , Ocelot.Provider.Polly * 修改 Pro ...

  6. MongoDB(四)：数据类型、插入文档、查询文档

    1. 数据类型 MongoDB支持许多数据类型. 字符串 - 这是用于存储数据的最常用的数据类型.MongoDB中的字符串必须为UTF-8. 整型 - 此类型用于存储数值. 整数可以是32位或64位, ...

  7. 「漏洞预警」Apache Flink 任意 Jar 包上传导致远程代码执行漏洞复现

    漏洞描述 Apache Flink是一个用于分布式流和批处理数据的开放源码平台.Flink的核心是一个流数据流引擎,它为数据流上的分布式计算提供数据分发.通信和容错功能.Flink在流引擎之上构建批处 ...

  8. mybatis+sqlServer 实现insertOrUpdate

    这两天遇到一个头疼的问题,我们系统需要请求第三方数据,第三方收到请求后会生成相应的数据并入库,我们通过定时任务将第三方数据同步到我们数据库.当我们发送请求后第三方会立即返回一个值,我们会根据返回值去数 ...

  9. react官方脚手架添加less配置

    装两个包 npm install --save less less-loader 在node-modules/react-scripts/config/webpack.config.js中 在大概58 ...

  10. React每隔0.2s颜色变淡 之settimeOut变成setInterval

    案例 每隔0.2s颜色变淡 公共数据是放在state中的哦! 代码如下 import React, { Component } from "react"; import { set ...