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. L53-Maximum-Subarray

    题目描述 Find the contiguous subarray within an array (containing at least one number) which has the lar ...

  2. 【30分钟学完】canvas动画|游戏基础(4):边界与碰撞

    前言 本系列前几篇中常出现物体跑到画布外的情况,本篇就是为了解决这个问题. 阅读本篇前请先打好前面的基础. 本人能力有限,欢迎牛人共同讨论,批评指正. 越界检测 假定物体是个圆形,如图其圆心坐标即是物 ...

  3. 高性能内存队列Disruptor--原理分析

    1.起源     Disruptor最初由lmax.com开发,2010年在Qcon公开发表,并于2011年开源,其官网定义为:"High Performance Inter-Thread ...

  4. python3 flask shell

    python shell来操作flask flask shell 报错: from flask_bootstrap import BootstrapImportError: No module nam ...

  5. SpringBoot1.5.10.RELEASE整合druid时,在druid monitor界面出现(*) property for user to setup

    接上篇随笔,配置druid之后出现的错误,解决方法如下: @Bean(destroyMethod = "close",initMethod = "init") ...

  6. 移动端1px的适配问题

    先看个概念: window.devicePixelRatio = 物理像素 / dips(独立像素) window.devicePixelRatio是设备的物理像素和独立像素的比例,可以叫设备像素比. ...

  7. new Date在IOS下面的兼容问题

    此问题坑爹啊,着实坑爹,要不是本宝宝鬼机灵再次进行了测试,不然测试都测不出来的问题,问题源头,有两个时间: let start =  "2018-08-08 00:00:00" ; ...

  8. Learn Regex The Easy Way

    GitHub上的正则表达式在线学习Learn Regex The Easy Way,可以帮助初学者快速入门 该项目已汉化,可在线练习 地址:https://github.com/ziishaned/l ...

  9. Go 的 http 包的源码,通过代码我们可以看到整个的 http 处理过程

    func (srv *Server) Serve(l net.Listener) error {defer l.Close() var tempDelay time.Duration // how l ...

  10. JS高精度乘法计算问题(牛客网乘法-求 a 和 b 相乘的值,a 和 b 可能是小数,需要注意结果的精度问题)

    用到的知识点===> toFixed(num); toFixed() 方法可把 Number 四舍五入为指定小数位数的数字; 参数num: 代表小数位数: 例:var num = 5.56789 ...