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 相关文章推荐
半角全角相互转换的js函数
Oct 16 Javascript
使用Javascript监控前端相关数据的代码
Oct 27 Javascript
获取JavaScript异步函数的返回值
Dec 21 Javascript
JavaScript实现瀑布流以及加载效果
Feb 11 Javascript
jQuery插件FusionCharts实现的3D柱状图效果实例【附demo源码下载】
Mar 03 Javascript
基于layer.js实现收货地址弹框选择然后返回相应的地址信息
May 26 Javascript
各种选择框jQuery的选中方法(实例讲解)
Jun 27 jQuery
jQuery实现动态给table赋值的方法示例
Jul 04 jQuery
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
Sep 12 jQuery
ES6顶层对象、global对象实例分析
Jun 14 Javascript
vue和小程序项目中使用iconfont的方法
May 19 Javascript
JavaScript监听键盘事件代码实现
Jun 03 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获取301跳转URL简单实例
2013/12/16 PHP
php7 安装yar 生成docker镜像
2017/05/09 PHP
PHP基于自定义函数实现的汉字转拼音功能实例
2017/09/30 PHP
javascript 跨浏览器开发经验总结(五) js 事件
2010/05/19 Javascript
Safari5中alert的无限循环BUG
2011/04/07 Javascript
Jquery中使用setInterval和setTimeout的方法
2013/04/08 Javascript
javascript获取ckeditor编辑器的值(实现代码)
2013/11/18 Javascript
让JavaScript的Alert弹出框失效的方法禁止弹出警告框
2014/09/03 Javascript
js单独获取一个checkbox看其是否被选中
2014/09/22 Javascript
JavaScript实现自动对页面上敏感词进行屏蔽的方法
2015/07/27 Javascript
JS给Textarea文本框添加行号的方法
2015/08/20 Javascript
使用JavaScript和CSS实现文本隔行换色的方法
2015/11/04 Javascript
JS获取文件大小方法小结
2015/12/08 Javascript
jQuery on()方法绑定动态元素的点击事件无响应的解决办法
2016/07/07 Javascript
Select下拉框模糊查询功能实现代码
2016/07/22 Javascript
AngularJS入门教程之ng-class 指令用法
2016/08/01 Javascript
基于JavaScript实现跳转提示页面
2016/09/24 Javascript
JavaScript中for循环的几种写法与效率总结
2017/02/03 Javascript
Vue.js 60分钟快速入门教程
2017/03/28 Javascript
Vue项目中引入外部文件的方法(css、js、less)
2017/07/24 Javascript
详解使用create-react-app添加css modules、sasss和antd
2018/07/31 Javascript
vue-next/runtime-core 源码阅读指南详解
2019/10/25 Javascript
详解微信小程序工程化探索之webpack实战
2020/04/20 Javascript
python ip正则式
2009/05/07 Python
使用python实现rsa算法代码
2016/02/17 Python
Python使用smtp和pop简单收发邮件完整实例
2018/01/09 Python
Python网络爬虫之爬取微博热搜
2019/04/18 Python
Python如何将字符串转换为日期
2020/07/31 Python
利用python为PostgreSQL的表自动添加分区
2021/01/18 Python
css3和jquery实现的可折叠导航菜单适合放在手机网页的导航菜单
2014/09/02 HTML / CSS
详解CSS3中border-image的使用
2015/07/18 HTML / CSS
泰国第一在线超市:Tops
2021/02/13 全球购物
产品设计开发计划书
2014/05/07 职场文书
教师竞聘演讲稿
2014/05/16 职场文书
婚礼家长致辞
2015/07/27 职场文书
导游词之凤凰古城
2019/10/22 职场文书