Vue组件通信的几种方法
上一节说到,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组件通信的几种方法的更多相关文章
- Vue中组件通信的几种方法(Vue3的7种和Vue2的12种组件通信)
Vue3组件通信方式: props $emit expose / ref $attrs v-model provide / inject Vuex 使用方法: props 用 props 传数据给子组 ...
- vue组件通信的几种方式
最近用vue开发项目,记录一下vue组件间通信几种方式 第一种,父子组件通信 一.父组件向子组件传值 1.创建子组件,在src/components/文件夹下新建一个Child.vue 2.Child ...
- vue跨组件通信的几种方法
http://www.tuicool.com/articles/jyM32mA 在开发组件的时候,一定会遇到组件的通信,比如点击一个图标出现弹窗和蒙层,这三个分别是不同的组件.管理他们之间的状态就成了 ...
- vue必须掌握之组件通信(7种方法)
方法一:$emit / props 父组件通过props的方式向子组件传递,子组件通过$emit触发父组件中v-on绑定的自定义事件 <!--父组件--> <template> ...
- Vue自定义组件以及组件通信的几种方式
本帖子来源:小贤笔记 功能 组件 (Component) 是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它 ...
- vue-learning:31 - component - 组件间通信的6种方法
vue组件间通信的6种方法 父子组件通信 prop / $emit 嵌套组件 $attrs / $liteners 后代组件通信 provide / inject 组件实例引用 $root / $pa ...
- 黑马vue---56-58、vue组件创建的三种方式
黑马vue---56-58.vue组件创建的三种方式 一.总结 一句话总结: 不论是哪种方式创建出来的组件,组件的 template 属性指向的模板内容,必须有且只能有唯一的一个根元素 1.使用 Vu ...
- Linux下进程通信的八种方法
Linux下进程通信的八种方法:管道(pipe),命名管道(FIFO),内存映射(mapped memeory),消息队列(message queue),共享内存(shared memory),信号量 ...
- c#中实现串口通信的几种方法
c#中实现串口通信的几种方法 通常,在C#中实现串口通信,我们有四种方法: 第一:通过MSCOMM控件这是最简单的,最方便的方法.可功能上很难做到控制自如,同时这个控件并不是系统本身所带,所以还得注册 ...
随机推荐
- MongoDB(七):聚合aggregate
1. 聚合aggregate 聚合主要用于计算数据,类似sql中的sum().avg() 语法: db.集合名称.aggregate([{管道:{表达式}}]) stu准备的数据: db.stu.in ...
- 不加班的秘诀:如何通过AOE快速集成NCNN?
作为我司头发储量前三的程序员 始终仗着头发多奋斗在加班的第一线 时时灵魂拷问自己 年轻人,你凭什么不加班? 虽然我没有女朋友但是,我有代码呀 但我不明白的是,隔壁工位那个,到岗比我迟,下班比我早,天天 ...
- 静态方法staticmethod和类方法classmethod
静态方法staticmethod和类方法classmethod 一.类方法classmethod 把一个方法变成一个类中的方法,这个方法可以直接利用类来调用,不需要依托任何的对象,即不需要实例化也可以 ...
- Selenium环境要配置浏览器驱动
1.浏览器环境变量添加到path 2.将浏览器相应的驱动.exe复制到浏览器目录 3.这条就是让我傻逼似的配置一上午的罪魁祸首:将驱动.exe复制到python目录!!!! Selenium
- Ocelot网关在.Net Core 的使用
1. 项目环境 .Net Core 2.2 Ocelot 13.5.2 2. 基本使用 * Nuget 安装 Ocelot , Ocelot.Provider.Polly * 修改 Pro ...
- MongoDB(四):数据类型、插入文档、查询文档
1. 数据类型 MongoDB支持许多数据类型. 字符串 - 这是用于存储数据的最常用的数据类型.MongoDB中的字符串必须为UTF-8. 整型 - 此类型用于存储数值. 整数可以是32位或64位, ...
- 「漏洞预警」Apache Flink 任意 Jar 包上传导致远程代码执行漏洞复现
漏洞描述 Apache Flink是一个用于分布式流和批处理数据的开放源码平台.Flink的核心是一个流数据流引擎,它为数据流上的分布式计算提供数据分发.通信和容错功能.Flink在流引擎之上构建批处 ...
- mybatis+sqlServer 实现insertOrUpdate
这两天遇到一个头疼的问题,我们系统需要请求第三方数据,第三方收到请求后会生成相应的数据并入库,我们通过定时任务将第三方数据同步到我们数据库.当我们发送请求后第三方会立即返回一个值,我们会根据返回值去数 ...
- react官方脚手架添加less配置
装两个包 npm install --save less less-loader 在node-modules/react-scripts/config/webpack.config.js中 在大概58 ...
- React每隔0.2s颜色变淡 之settimeOut变成setInterval
案例 每隔0.2s颜色变淡 公共数据是放在state中的哦! 代码如下 import React, { Component } from "react"; import { set ...