Vue2.0用 watch 观察 prop 变化(不触发)


Posted in Javascript onSeptember 08, 2017

本文介绍了Vue2.0用 watch 观察 prop 变化(不触发),分享给大家,具体如下:

A 组件:

export default {
 props:{
 name:{
 type:String
 }
 },
 data () {
 return {
  author: "Jinkey"
 }
 },
 mounted:function(){
 this.author = 'lili'
 },
 watch:{
 name:function(){
 console.log(this.name);
 },
 author:function(){
 console.log('lili');
 }
 }
}

author 有监测到变化,并输出了 lili ; name 由 B 组件传入,却没有监测到,控制台没有输出。

在 B 组件里调用 A 组件,并传值给 name

<firstcomponent :name="name"></firstcomponent>

import firstcomponent from './component/firstcomponent.vue'
export default {
 data () {
 return {
  msg: 'Hello Vue!',
  name:'lili'
 }
 },
 components: { firstcomponent}
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript下过滤数组重复值的代码
Sep 10 Javascript
jQuery选中select控件 无法设置selected的解决方法
Sep 01 Javascript
jQuery中判断一个元素是否为另一个元素的子元素(或者其本身)
Mar 21 Javascript
JavaScript回调(callback)函数概念自我理解及示例
Jul 04 Javascript
浅析JavaScript中的常用算法与函数
Nov 21 Javascript
js模拟C#中List的简单实例
Mar 06 Javascript
JavaScript中的Web worker多线程API研究
Dec 06 Javascript
JavaScript中5种调用函数的方法
Mar 12 Javascript
jQuery简单实现QQ空间点赞已经取消点赞
Apr 02 Javascript
微信小程序 input输入及动态设置按钮的实现
Oct 27 Javascript
15分钟上手vue3.0(小结)
May 20 Javascript
js事件机制----捕获与冒泡机制实例分析
May 22 Javascript
详解vue2 $watch要注意的问题
Sep 08 #Javascript
Express + Session 实现登录验证功能
Sep 08 #Javascript
Vue中组件之间数据的传递的示例代码
Sep 08 #Javascript
详解jquery插件jquery.viewport.js学习使用方法
Sep 08 #jQuery
JavaScript实现开关等效果
Sep 08 #Javascript
浅谈React Native 中组件的生命周期
Sep 08 #Javascript
Vue仿手机qq的实例代码(demo)
Sep 08 #Javascript
You might like
php 计算两个时间戳相隔的时间的函数(小时)
2009/12/18 PHP
《PHP编程最快明白》第五讲:php目录、文件操作
2010/11/01 PHP
php简单压缩css样式示例
2016/09/22 PHP
PHP中用Trait封装单例模式的实现
2019/12/18 PHP
基于jQuery的树控件实现代码(asp.net+json)
2010/07/11 Javascript
jquery.validate分组验证代码
2011/03/17 Javascript
Javascript小技巧之生成html元素
2014/05/15 Javascript
JavaScript中使用Object.prototype.toString判断是否为数组
2015/04/01 Javascript
BOM系列第三篇之定时器应用(时钟、倒计时、秒表和闹钟)
2016/08/17 Javascript
jQuery、zepto、js常用小技巧
2017/02/12 Javascript
Angularjs中ng-repeat的简单实例
2017/08/25 Javascript
解决Layui选择全部,换页checkbox复选框重新勾选的问题方法
2018/08/14 Javascript
对vue事件的延迟执行实例讲解
2018/08/28 Javascript
一步一步的了解webpack4的splitChunk插件(小结)
2018/09/17 Javascript
Openlayers显示瓦片网格信息的方法
2020/09/28 Javascript
vue-quill-editor插入图片路径太长问题解决方法
2021/01/08 Vue.js
[01:05]主宰至宝剑心之遗
2017/03/16 DOTA
[57:22]2018DOTA2亚洲邀请赛 4.7总决赛 LGD vs Mineski 第五场
2018/04/10 DOTA
Python 基于Twisted框架的文件夹网络传输源码
2016/08/28 Python
教你用Python写安卓游戏外挂
2018/01/11 Python
Python实现确认字符串是否包含指定字符串的实例
2018/05/02 Python
python验证码识别教程之利用滴水算法分割图片
2018/06/05 Python
python实现小球弹跳效果
2019/05/10 Python
python如何求数组连续最大和的示例代码
2020/02/04 Python
不到20行实现Python代码即可制作精美证件照
2020/04/24 Python
使用html5+css3来实现slider切换效果告别javascript+css
2013/01/08 HTML / CSS
精油和天然健康美容产品:Art Naturals
2018/01/27 全球购物
英国领先的露营和露营车品牌之一:OLPRO
2019/08/06 全球购物
解释下面关于J2EE的名词
2013/11/15 面试题
运动会入场解说词
2014/02/07 职场文书
《木笛》教学反思
2014/03/01 职场文书
一分钟演讲稿
2014/04/30 职场文书
预备党员个人总结
2015/02/14 职场文书
关于军训的感想
2015/08/07 职场文书
如何通过一篇文章了解Python中的生成器
2022/04/02 Python
java中如何截取字符串最后一位
2022/07/07 Java/Android