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 相关文章推荐
xmlHTTP实例
Oct 24 Javascript
Javascript中Eval函数的使用说明
Oct 11 Javascript
ie与ff下的event事件使用介绍
Nov 25 Javascript
文本框(input)获取焦点(onfocus)时样式改变的示例代码
Jan 10 Javascript
Javascript浮点数乘积运算出现多位小数的解决方法
Feb 17 Javascript
js实现两点之间画线的方法
May 12 Javascript
在JS方法中返回多个值的方法汇总
May 20 Javascript
jQuery中checkbox反复调用attr('checked', true/false)只有第一次生效的解决方法
Nov 16 Javascript
vuejs2.0运用原生js实现简单的拖拽元素功能示例
Feb 24 Javascript
JS检测window.open打开的窗口是否关闭
Jun 25 Javascript
微信小程序云开发之使用云存储
May 17 Javascript
js贪心算法 钱币找零问题代码实例
Sep 11 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
关于file_get_contents返回为空或函数不可用的解决方案
2013/06/24 PHP
php事务处理实例详解
2014/07/11 PHP
php在线解压ZIP文件的方法
2014/12/30 PHP
php查找字符串中第一个非0的位置截取
2017/02/27 PHP
删除PHP数组中头部、尾部、任意元素的实现代码
2017/04/10 PHP
支持汉转拼和拼音分词的PHP中文工具类ChineseUtil
2018/02/23 PHP
php时间戳转换代码详解
2019/08/04 PHP
Jquery 跨域访问 Lightswitch OData Service的方法
2013/09/11 Javascript
IE6-IE9中tbody的innerHTML不能赋值的解决方法
2014/06/05 Javascript
JavaScript汉诺塔问题解决方法
2015/04/21 Javascript
介绍JavaScript的一个微型模版
2015/06/24 Javascript
Vue.js组件tab实现选项卡切换
2020/03/23 Javascript
详解EasyUi控件中的Datagrid
2017/08/23 Javascript
在vue项目中引入highcharts图表的方法(详解)
2018/03/05 Javascript
vue  自定义组件实现通讯录功能
2018/09/30 Javascript
Vue+Koa2+mongoose写一个像素绘板的实现方法
2019/09/10 Javascript
vue-路由精讲 二级路由和三级路由的作用
2020/08/06 Javascript
[01:13]2015国际邀请赛线下观战现场
2015/08/08 DOTA
使用IronPython把Python脚本集成到.NET程序中的教程
2015/03/31 Python
浅析Python基础-流程控制
2016/03/18 Python
小议Python中自定义函数的可变参数的使用及注意点
2016/06/21 Python
Python时间的精准正则匹配方法分析
2017/08/17 Python
Python AES加密实例解析
2018/01/18 Python
使用python实现http及ftp服务进行数据传输的方法
2018/10/26 Python
python读取各种文件数据方法解析
2018/12/29 Python
快速创建python 虚拟环境
2020/11/28 Python
HTML5新增form控件和表单属性实例代码详解
2019/05/15 HTML / CSS
波兰运动鞋网上商店:Distance.pl
2020/07/30 全球购物
英语专业毕业生自荐信范文
2013/12/31 职场文书
商业融资计划书
2014/04/29 职场文书
2014年双拥工作总结
2014/11/21 职场文书
第一军规观后感
2015/06/12 职场文书
消费者理赔投诉书
2015/07/02 职场文书
2016抗战胜利71周年红领巾广播稿
2015/12/18 职场文书
python中如何对多变量连续赋值
2021/06/03 Python
Nginx静态压缩和代码压缩提高访问速度详解
2022/05/30 Servers