组件通信:

  父组件传递子组件:

    把需要的数据 传递给 子组件的数据,以数据绑定(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. elasticsearch shield在java中的应用

    官方文档:https://www.elastic.co/guide/en/shield/current/_using_elasticsearch_java_clients_with_shield.ht ...

  2. Facebook币Libra学习-6.发行属于自己的代币Token案例(含源码)

    在这个简短的概述中,我们描述了我们在eToro标记化资产背后实施技术的初步经验,即MoveIR语言中的(eToken),用于在Libra网络上进行部署. Libra协议是一个确定性状态机,它将数据存储 ...

  3. opencv_traincascade级联训练人脸数据

    正负样本格式:  正样本 灰度化 24*24 2000张  负样本 灰度化 50*50 1000张 训练过程  第一步:dir /b >pos.txt 以及dir /b >neg.txt ...

  4. Session_start的使用

    PHP session用法其实很简单它可以把用户提交的数据以全局变量形式保存在一个session中并且会生成一个唯一的session_id,这样就是为了多了不会产生混乱了,并且session中同一浏览 ...

  5. windows/Linux 下安装coreseek/sphinx

    2013年12月8日 17:26:26 注意的地方: 1.配置文件的 数据源, 索引, 服务 这3处配置的路径要写成windows识别的路径,最好是绝对路径 2.安装windows服务的时候,可以不带 ...

  6. 阶段5 3.微服务项目【学成在线】_day02 CMS前端开发_08-vuejs研究-vuejs基础-v-if和v-for指令

    1.2.4 v-if和v-for <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  7. 关于对VGA、DVI、HDMI的区别

    VGA接口: DVI接口: HDMI接口 可以这么理解: 1. VGA传输普通视频信号,DVI传输高清视频信号,HDMI传输高清视频信号并支持音频传输.2. HDMI的三种接口只有大小区别,功能没有任 ...

  8. HBase管理与监控——HMaster或HRegionServer自动停止挂掉

    问题描述 HBase在运行一段时间后,会出现以下2种情况: 1.HMaster节点自动挂掉: 通过jps命令,发现HMaster进程没了,只剩下HRegionServer,此时应用还能正常往HBase ...

  9. 解决升Win10系统后VMware虚拟机不能联网的问题

    刚升级到Win10系统,打开虚拟机发现不能联网,其实是系统服务项里缺少两个用到的服务,不能联网了,下面教大家解决联网问题. 1.打开VMware虚拟机主页,点击“编辑——虚拟网络编辑器”. 2.点击左 ...

  10. 源码搭建zabbix服务

    1) 部署LNMP 1.1) cd /root tar -xf lnmp_soft.tar.gz cd lnmp_soft/ tar -xf nginx-1.10.3.tar.gz cd nginx- ...