vue—组件通信,ref
组件通信:
父组件传递子组件:
把需要的数据 传递给 子组件的数据,以数据绑定(v-bind)的形式,传递到子组件内部,供子组件使用,缩写(:)
动态传递:
第一步:在父组件中的子组件标签中进行动态的传值:
第二步:在子组件手动填写props这个对象属性
第三步:在子组件中 props 进行接收数据,通过 this.$props.传递过来数据的名称
props:
props是一个对象
props是组件标签上的所有属性身上构成的集合,用于父组件和子组件之间通信的一个桥梁
注意:组件中的this都是指向组件自己的
静态传递:(死数据,不会被修改)
什么是 静态传值 和 动态传值?
静态传值:标志就是没有 v-bind(死数据不会通过ajax更开的)
动态传值:数据是活的,可以改变子组件原本的数据。
子组件传递父组件
子组件把数据传递给父组件,使用的是自定义事件,使用的是 事件绑定机制 v-on 缩写:@
在父组件,当我们定义一个 事件属性 之后,那么,子组件就能够,通过某些方式,来调用 传递进去的的方法了
showfou就是自定义的事件属性,ffshow是方法
子组件:通过 this.$emit(),第一个参数是自定义的事件属性,第二个参数是要传递的参数
ref
ref 是 父组件获取子组件的所有属性
ref也是一个对象
第一步:给子组件标签上添加ref属性赋值
第二步:在父组件中可以使用 this.$refs 来获取,返回的是一个对象,属性值是子组件
vue—组件通信,ref的更多相关文章
- 组件通信 $ref
(1)放在dom上表示获取当前dom元素, (2)放到组件上表示获取当前组件实例 (3)在v-for中获取的是集合 <!DOCTYPE html> <html lang=" ...
- 【Vue组件通信】props、$ref、$emit,组件传值
1.什么是组件通信 组件间如何通信,也就成为了vue中重点知识,组件通信,涉及到组件之间数据的传递.类似NET POST/GET参数传递. Vue基本的三种传递方式** (props.\(ref.\) ...
- VUE 组件通信总结
1.prop 父组件传递给子组件,即通过VUE本身具有的Props属性来传递值 Child组件 <template> <span>{{message}}</span> ...
- vue组件通信&&v兄弟组件通信eventbus遇到的问题(多次触发、第一次不触发)
组件通讯包括:父子组件间的通信和兄弟组件间的通信.在组件化系统构建中,组件间通信必不可少的 (vuex以后再说). 父组件--> 子组件 1. 属性设置 父组件关键代码如下: <templ ...
- Vue组件通信的几种方法
上一节说到,vue.js是允许子组件通过props接受父组件的信息,但是不允许父组件通过props接受子组件的信息 1. $emit()和on 当子组件需要向父组件传递数据时,就要用到自定义事件. 使 ...
- vue组件通信全面总结
写在前面 组件间的通信是是实际开发中非常常用的一环,如何使用对项目整体设计.开发.规范都有很实际的的作用,我在项目开发中对此深有体会,总结下vue组件间通信的几种方式,讨论下各自的使用场景 文章对相关 ...
- Vue 组件通信方案
父组件--> 子组件 1. 属性设置 父组件关键代码如下: <template> <Child :child-msg="msg"></Child ...
- vue组件通信的几种方式
最近用vue开发项目,记录一下vue组件间通信几种方式 第一种,父子组件通信 一.父组件向子组件传值 1.创建子组件,在src/components/文件夹下新建一个Child.vue 2.Child ...
- vue 组件通信
组件 组件之间的数据是单向绑定的. 父组件向子组件通信 是通过子组件定义的props属性来实现.通过props定义变量与变量类型和验证方式. props简化定义 在简化定义中,变量是以数组的方式定义. ...
随机推荐
- springboot的注解
1.@ConfigurationProperties 功能:装载配置文件信息到实体 原理:aop,通知类型:?(方法或对象创建完后) 注意:作用于方法上可以不需要改源码(例如durid配置) 转载:h ...
- Js中Array常用方法小结
说起Array的方法,不免让人皱一下眉头,下面我们从增删改查角度依次来总结. 1.增 push: 将传入的参数 ,插入数组的尾部,并返回新数组的长度.不管传入参数为一个值还是一个数组,都作为插入数组的 ...
- spring boot jpa-java.lang.IllegalArgumentException: Not a managed type异常问题解决方法
JPA实体类没有被扫描到,导致这样的情况有以下几种可能: 实体类没有加上@Entity注解 对应解决方法在实体类上加上@Entity即可解决问题 没有按照SpringBoot的约定,默认扫描(appl ...
- python 中对象is和==是怎么比较的
Python中的对象包含三要素:id.type.value.其中id用来唯一标识一个对象,type标识对象的类型,value是对象的值.is判断的是a对象是否就是b对象,是通过id来判断的.==判断的 ...
- MySQL 临时表和复制表
MySQL 临时表在我们需要保存一些临时数据时是非常有用的.临时表只在当前连接可见,当关闭连接时,Mysql会自动删除表并释放所有空间. 临时表在MySQL 3.23版本中添加,如果你的MySQL版本 ...
- Swift 自动引用计数(ARC)
Swift 使用自动引用计数(ARC)这一机制来跟踪和管理应用程序的内存 通常情况下我们不需要去手动释放内存,因为 ARC 会在类的实例不再被使用时,自动释放其占用的内存. 但在有些时候我们还是需要在 ...
- 移动Windows Kits目录
Visual Studio安装以后动辄得咎就占用c盘20多个G的空间,这对空间紧张的用户来说的确令人望而生畏. 比如笔者Windows Kits这个目录往往就4G空间以上,为了节省空间,移动到其他目录 ...
- Python实现的选择排序算法原理与用法实例分析
Python实现的选择排序算法原理与用法实例分析 这篇文章主要介绍了Python实现的选择排序算法,简单描述了选择排序的原理,并结合实例形式分析了Python实现与应用选择排序的具体操作技巧,需要的朋 ...
- JAVA 基础编程练习题37 【程序 37 报数】
37 [程序 37 报数] 题目:有 n 个人围成一圈,顺序排号.从第一个人开始报数(从 1 到 3 报数),凡报到 3 的人退出圈子, 问最后留下的是原来第几号的那位. package cskaoy ...
- supervieord的使用
用途 守护进程,帮你管理其他进程,让其他进程成为后台进程 监控进程是否死掉,自动重启: 管理进程的启动,停止: 对进程输出的日志进行管理 每个进程使用不同的用户启动,这样可以使进程获得不同用户的权限 ...