props:['updateData'],
data(){
return{
form: {
_name:'',
},
}
},

第一步接收数据:

props:['updateData']
 
第二步动态改变值:
mounted(){
this.form._name = this.updateData._name;
},

第三步使用watch监听 updateData数据

 watch:{
    updateData: function (newVal ,oldVal){ //不能用箭头函数
        this.form._name = newVal._name
    }
  }
 

浅谈VUE,使用watch方法监听父组件传到子组件的数据。的更多相关文章

  1. vue父组件传值给子组件

    一.父传子 方式一 父传子主要通过在父组件v-model绑定数据,在子组件进行用props进行数据的接收 父组件 <template> <div id="container ...

  2. 九、React中的组件、父子组件、React props父组件给子组件传值、子组件给父组件传值、父组件中通过refs获取子组件属性和方法

    一.概述 React中的组件: 解决html 标签构建应用的不足. 使用组件的好处:把公共的功能单独抽离成一个文件作为一个组件,哪里里使用哪里引入. [父子组件]:组件的相互调用中,我们把调用者称为父 ...

  3. 浅谈Vue响应式(数组变异方法)

    很多初使用Vue的同学会发现,在改变数组的值的时候,值确实是改变了,但是视图却无动于衷,果然是因为数组太高冷了吗? 查看官方文档才发现,不是女神太高冷,而是你没用对方法. 看来想让女神自己动,关键得用 ...

  4. 浅谈Vue中计算属性(computed)和方法(methods)的差别

    浅谈Vue中计算属性(computed)和方法(methods)的差别 源码地址 methods方法和computed计算属性,两种方式的最终结果确实是完全相同 计算属性是基于它们的响应式依赖进行缓存 ...

  5. 浅谈Vue不同场景下组件间的数据交流

    浅谈Vue不同场景下组件间的数据“交流”   Vue的官方文档可以说是很详细了.在我看来,它和react等其他框架文档一样,讲述的方式的更多的是“方法论”,而不是“场景论”,这也就导致了:我们在阅读完 ...

  6. 在vue中使用watch监听对象或数组

    最近发现在vue中使用watch监听对象或者数组时,当数组或者对象只是单一的值改变时,并不会出发watch中的事件. 在找问题过程中,发现当数组使用push一类的方法时,会触发watch,如果只是单一 ...

  7. 【Vue】浅谈Vue不同场景下组件间的数据交流

    浅谈Vue不同场景下组件间的数据“交流”   Vue的官方文档可以说是很详细了.在我看来,它和react等其他框架文档一样,讲述的方式的更多的是“方法论”,而不是“场景论”,这也就导致了:我们在阅读完 ...

  8. 浅谈Vue下的components模板

    浅谈Vue下的components模板在我们越来越深入Vue时,我们会发现我们对HTML代码的工程量会越来越少,今天我们来谈谈Vue下的 components模板的 初步使用方法与 应用 我们先来简单 ...

  9. 浅谈vue学习之组件通信

    vue用组件化简化了我们编写代码的复杂度,组件之间经常会出现数据传递的情况,那么组件之间是怎样通信的呢? 使用props传递数据 组件实例的作用域是孤立的.这意味着不能 (也不应该) 在子组件的模板内 ...

随机推荐

  1. 内核融合:GPU深度学习的“加速神器”

    ​编者按:在深度学习"红透"半边天的同时,当前很多深度学习框架却面临着共同的性能问题:被频繁调用的代数运算符严重影响模型的执行效率. 本文中,微软亚洲研究院研究员薛继龙将为大家介绍 ...

  2. Molex莫仕:技术向左,连接器向右

    序言:众所周知,Molex莫仕主要产品是连接器,近几年伴随市场的改变,客户要求的改变,供应链的改变,我Molex也在改变,现在的Molex已不仅仅是连接器公司,转型成技术为导向的公司——技术向左,连接 ...

  3. Zabbix自动发现并监控磁盘IO、报警

    本文转载自: https://www.93bok.com 引言 Zabbix并没有提供模板来监控磁盘的IO性能,所以我们需要自己来创建一个,由于一台服务器中磁盘众多,如果只有一两台可以手动添加,但服务 ...

  4. PHPRAP v1.0.6 发布,修复因php7.1版本遗弃mcrypt扩展造成安装失败的BUG

    PHPRAP,是一个PHP轻量级开源API接口文档管理系统,致力于减少前后端沟通成本,提高团队协作开发效率,打造PHP版的RAP. 更新记录 [修复]修复因php7.1版本遗弃mcrypt扩展造成安装 ...

  5. 前端小姐姐学PHP之(二)

    上次了我们配置好开发环境了,本小节主要讲述内容点: phpStrom的运行环境配置 创建数据库.数据表 连接数据库 一.phpStrom的运行环境配置(windows版) 注:MAC版原文地址 htt ...

  6. css实战#用css画一个中国结

    大家好!今天跟大家分享一个用 css 画中国结的教程.最终效果如下: 大家如果感兴趣可以参考我的源码:gitHub地址 首先,我们定义好画中国结需要的结构: <div class="k ...

  7. 为什么要使用webpack?

    在网页中会引用到哪些常见的静态资源? js (.js  .jsx  .coffee  .ts) css (.css  .less  .sass  .scss scss是sass的plus版) imag ...

  8. springboot 整合logback

    日志包使用的是springboot内置的日志包,所以我们不许要再专门导入日志包 1.logback-spring.xml配置 <?xml version="1.0" enco ...

  9. 将url转化成file文件

            let img = "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=508387608,28489740 ...

  10. oracle的wm_concat函数实现行转列

    有以下数据 deptname phone username isboss 部门A 电话1 员工A 0 部门A 电话1 领导A 1 部门B 电话2 员工B 0 部门B 电话2 员工C 0 部门B 电话2 ...