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执行顺序
Nov 09 Javascript
Javascript生成json的函数代码(可以用php的json_decode解码)
Jun 11 Javascript
jquery查找tr td 示例模拟
May 08 Javascript
jQuery中has()方法用法实例
Jan 06 Javascript
jQuery插件制作之参数用法实例分析
Jun 01 Javascript
jQuery中借助deferred来请求及判断AJAX加载的实例讲解
May 24 Javascript
JS实现小球的弹性碰撞效果
Nov 11 Javascript
jquery ajax加载数据前台渲染方式 不用for遍历的方法
Aug 09 jQuery
vue中当图片地址无效的时候,显示默认图片的方法
Sep 18 Javascript
微信小程序HTTP请求从0到1封装
Sep 09 Javascript
在vue中通过render函数给子组件设置ref操作
Nov 17 Vue.js
Three.js实现雪糕地球的使用示例详解
Jul 07 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 XML error parsing SOAP payload on line 1
2010/06/17 PHP
PHP的5个安全措施小结
2012/07/17 PHP
smarty内部日期函数html_select_date()用法实例分析
2015/07/08 PHP
Yii2.0多文件上传实例说明
2017/07/24 PHP
thinkphp框架类库扩展操作示例
2019/11/26 PHP
经典海量jQuery插件 大家可以收藏一下
2010/02/07 Javascript
jquery插件实现鼠标经过图片右侧显示大图的效果(类似淘宝)
2013/02/04 Javascript
Javascript实现返回上一页面并刷新的小例子
2013/12/11 Javascript
javascript教程:关于if简写语句优化的方法
2014/05/17 Javascript
原生js实现复制对象、扩展对象 类似jquery中的extend()方法
2014/08/30 Javascript
Dojo Javascript 编程规范 规范自己的JavaScript书写
2014/10/26 Javascript
JavaScript实现文字与图片拖拽效果的方法
2015/02/16 Javascript
Node.js Streams文件读写操作详解
2016/07/04 Javascript
自带气泡提示的vue校验插件(vue-verify-pop)
2017/04/07 Javascript
Vue利用canvas实现移动端手写板的方法
2018/05/03 Javascript
动态加载JavaScript文件的3种方式
2018/05/05 Javascript
vue 使用高德地图vue-amap组件过程解析
2019/09/07 Javascript
详解vue-template-admin三级路由无法缓存的解决方案
2020/03/10 Javascript
python开发之基于thread线程搜索本地文件的方法
2015/11/11 Python
在Django中进行用户注册和邮箱验证的方法
2016/05/09 Python
使用Python编写一个最基础的代码解释器的要点解析
2016/07/12 Python
使用Python多线程爬虫爬取电影天堂资源
2016/09/23 Python
浅谈python中的__init__、__new__和__call__方法
2017/07/18 Python
python实现输入数字的连续加减方法
2018/06/22 Python
基于wxPython的GUI实现输入对话框(1)
2019/02/27 Python
pytorch使用指定GPU训练的实例
2019/08/19 Python
tensorflow之并行读入数据详解
2020/02/05 Python
python异步Web框架sanic的实现
2020/04/27 Python
Spring @Enable模块驱动原理及使用实例
2020/06/23 Python
GUESS Factory加拿大:牛仔裤、服装及配饰
2019/09/20 全球购物
中东奢侈品购物网站:Ounass
2020/09/02 全球购物
现在输入n个数字,以逗号,分开;然后可选择升或者降序排序;按提交键就在另一页面显示按什么排序,结果为,提供reset
2012/11/09 面试题
会计电算化专业毕业生求职信范文
2013/12/10 职场文书
培训演讲稿范文
2014/01/12 职场文书
关爱残疾人演讲稿
2014/05/24 职场文书
党员群众路线自我剖析材料
2014/10/06 职场文书