组件通信:

  父组件传递子组件:

    把需要的数据 传递给 子组件的数据,以数据绑定(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的更多相关文章

  1. 组件通信 $ref

    (1)放在dom上表示获取当前dom元素, (2)放到组件上表示获取当前组件实例 (3)在v-for中获取的是集合 <!DOCTYPE html> <html lang=" ...

  2. 【Vue组件通信】props、$ref、$emit,组件传值

    1.什么是组件通信 组件间如何通信,也就成为了vue中重点知识,组件通信,涉及到组件之间数据的传递.类似NET POST/GET参数传递. Vue基本的三种传递方式** (props.\(ref.\) ...

  3. VUE 组件通信总结

    1.prop 父组件传递给子组件,即通过VUE本身具有的Props属性来传递值 Child组件 <template> <span>{{message}}</span> ...

  4. vue组件通信&&v兄弟组件通信eventbus遇到的问题(多次触发、第一次不触发)

    组件通讯包括:父子组件间的通信和兄弟组件间的通信.在组件化系统构建中,组件间通信必不可少的 (vuex以后再说). 父组件--> 子组件 1. 属性设置 父组件关键代码如下: <templ ...

  5. Vue组件通信的几种方法

    上一节说到,vue.js是允许子组件通过props接受父组件的信息,但是不允许父组件通过props接受子组件的信息 1. $emit()和on 当子组件需要向父组件传递数据时,就要用到自定义事件. 使 ...

  6. vue组件通信全面总结

    写在前面 组件间的通信是是实际开发中非常常用的一环,如何使用对项目整体设计.开发.规范都有很实际的的作用,我在项目开发中对此深有体会,总结下vue组件间通信的几种方式,讨论下各自的使用场景 文章对相关 ...

  7. Vue 组件通信方案

    父组件--> 子组件 1. 属性设置 父组件关键代码如下: <template> <Child :child-msg="msg"></Child ...

  8. vue组件通信的几种方式

    最近用vue开发项目,记录一下vue组件间通信几种方式 第一种,父子组件通信 一.父组件向子组件传值 1.创建子组件,在src/components/文件夹下新建一个Child.vue 2.Child ...

  9. vue 组件通信

    组件 组件之间的数据是单向绑定的. 父组件向子组件通信 是通过子组件定义的props属性来实现.通过props定义变量与变量类型和验证方式. props简化定义 在简化定义中,变量是以数组的方式定义. ...

随机推荐

  1. c++问题集合

    1.对于程序未运行和运行后的代码段到底存储什么? 2.编写程序时为什么先申请变量后使用? 3.malloc本质到底分配了什么?谁赋给的? 4.程序在系统上是怎么运行起来的? 5.当我们双击一个程序运行 ...

  2. TCP SACK 介绍 转载

    一.SACK选项 默认情况下TCP采取的是累积确认机制,这时如果发生了报文乱序到达,接收方只会重复确认最后一个按序到达的报文段,为此发送方的处理只能是重复按序到达接收方的报文段之后的那个报文段,因而它 ...

  3. Egyptian Collegiate Programming Contest (ECPC 2015)

    题目链接:https://vjudge.net/contest/155219#overview. A题,用全排列来找出比当前这个数字字典序还大的排列有几个,然后前缀和dp即可.据说可以康拓展开来快速找 ...

  4. Golang switch语句总结

    switch 语句基本结构 switch 条件表达式 { case 常量表达式1: 语句 1 case 常量表达式2: 语句 2 . . . case 常量表达式n: 语句 n default: 语句 ...

  5. React的基本认识

    1.1.1. 官网 1) 英文官网: https://reactjs.org/ 2) 中文官网: https://doc.react-china.org/ 1.1.2.  介绍描述 1) 用于构建用户 ...

  6. DockerFile体系结构(保留字指令)

    1.FROM --基础镜像,当前新镜像是基于那个镜像的 2.MAINTAINER --镜像维护者的姓名和邮箱地址 3.RUN --容器构建时需要运行的指令 4.EXPOSE --当前容器对外暴露出的端 ...

  7. BGP多线 有些BGP IP也会被极少数运营商劫持 取Ip逻辑

    小结: 1.租用的服务器只有一个IP,用户的访问路线是由路由器根据访客的实际访问速度选择最优访问路径,来选择访问的.而且不占用任何的服务器资源.服务器的上行和下行都是有路由器来选择最佳的路线,所以这样 ...

  8. Windows 10 搭建Python3 安装使用 protobuf

    Protobuf对比XML.Json等其他序列化的优势 protobuf 不管是处理时间上,还是空间占用上都优于现有的其他序列化方式.内存暂用是java 序列化的1/9,时间也是差了一个数量级,一次操 ...

  9. 阶段5 3.微服务项目【学成在线】_day03 CMS页面管理开发_07-新增页面-前端-页面完善

    在新增页面加返回按钮 <el-button type="primary" @click="go_back" >返回</el-button> ...

  10. zip炸弹

    故障系统有人提了zip炸弹的故障,了解了一些关于zip炸弹的常识. 42.zip 是很有名的zip炸弹.一个42KB的文件,解压完其实是个4.5PB的“炸弹”. 更有甚者,一个叫做 droste.zi ...