上一节说到，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. DC8: Vulnhub Walkthrough

    镜像下载链接: https://www.vulnhub.com/entry/dc-8,367/#download 主机扫描: http://10.10.202.131/?nid=2%27 http:/ ...

  2. 面试连环炮系列（十二）：说说Atomiclnteger的使用场景

    说说Atomiclnteger的使用场景 AtomicInteger提供原子操作来进行Integer的使用,适合并发情况下的使用,比如两个线程对同一个整数累加. 为什么Atomiclnteger是线程 ...

  3. Spring Boot 处理异常返回json

    spring boot 老版本处理异常  对于浏览器客户端,返回error数据 对于非浏览器返回json数据, 主要取决于你的请求head 是什么 但是当我们自定义了:  老版本无论请求什么都会返回j ...

  4. 精通awk系列(2)：本教程测试所用示例文件

    回到: Linux系列文章 Shell系列文章 Awk系列文章 本系列的awk教程中,将大量使用到如下示例文件a.txt. ID name gender age email phone 1 Bob m ...

  5. .net core 3.0web_razor page项目_使用中间件接受大文件上传报错_httpRequest.Form threw an exception of type Microsoft.AspNetCore.Server.Kestrel.Core.BadHttpRequestException_Request body too large

    前言:在web项目的.net framework时文件上传时,自己常用一般处理程序接受上传文件,上传文件的大小限制是可以项目的webconfig里配置.   到core项目使用一般处理程序变成了中间件 ...

  6. 教你用python假装黑客装逼，当着朋友的面破解他的网站密码！

    如何破解iphone登陆密码 今天看了一篇关于如何破解iphone手机密码的文章,瞬间觉得科学技术不是第一生产力,why? 根据“可靠消息”称,即便美国FBI也无法轻易的对iphone手机进行暴力破解 ...

  7. 获取input type=file 的文件内容（纯文本）

    一.获取input type=file 的文件内容(纯文本) 1.需求一 通过点击其他事件,来触发 文件选择框(限定格式为 .c 文件),而不是手动鼠标点击触发. [思路:] step1:将 inpu ...

  8. Windows宏病毒利用

    背景: 最近忙的飞起,各种事情,不想吐槽,因为某些事情,还吃了口屎,啧啧啧..... 常见的钓鱼,社工基本技术都是这种,什么鱼叉,水坑,社工,投毒之类的,APT 攻击惯用伎俩. 那么今天主要利用Win ...

  9. NestedScrollView、ScrollView 加载完自动滑动至底部问题的解决方案

    正常情况下,由于NestedScrollView/ScrollView 嵌套RecyclerView,可能会导致Recyclerview占据焦点导致整个NestedScrollView/ScrollV ...

  10. 20190608_浅谈go&java差异(三)

    20190608_浅谈go&java差异(三) 转载请注明出处https://www.cnblogs.com/funnyzpc/p/10990703.html 第三节内容概览 多线程通讯(线程 ...