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 相关文章推荐
jq实现左侧显示图片右侧文字滑动切换效果
Aug 04 Javascript
Javascript基于AJAX回调函数传递参数实例分析
Dec 15 Javascript
JavaScript学习笔记之创建对象
Mar 25 Javascript
vue中for循环更改数据的实例代码(数据变化但页面数据未变)
Sep 15 Javascript
JS+CSS实现滚动数字时钟效果
Dec 25 Javascript
微信小程序自定义组件封装及父子间组件传值的方法
Aug 28 Javascript
JS实现利用闭包判断Dom元素和滚动条的方向示例
Aug 26 Javascript
JS面向对象编程基础篇(一) 对象和构造函数实例详解
Mar 03 Javascript
JS实现数据动态渲染的竖向步骤条
Jun 24 Javascript
vue 组件之间事件触发($emit)与event Bus($on)的用法说明
Jul 28 Javascript
Vue组件通信$attrs、$listeners实现原理解析
Sep 03 Javascript
JavaScript中的宏任务和微任务详情
Nov 27 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
phpmyadmin显示utf8_general_ci中文乱码的问题终级篇
2013/04/08 PHP
Ajax+PHP快速上手及简单应用说明
2013/07/24 PHP
php smarty truncate UTF8乱码问题解决办法
2014/06/13 PHP
destoon实现调用图文新闻的方法
2014/08/21 PHP
php中preg_replace_callback函数简单用法示例
2016/07/21 PHP
PHP检查网站是否宕机的方法示例
2017/07/24 PHP
ThinkPHP框架结合Ajax实现用户名校验功能示例
2019/07/03 PHP
PHP设计模式之装饰器(装饰者)模式(Decorator)入门与应用详解
2019/12/13 PHP
用 javascript 实现的点击复制代码
2007/03/24 Javascript
javascript通过navigator.userAgent识别各种浏览器
2013/10/25 Javascript
使用原生js封装webapp滑动效果(惯性滑动、滑动回弹)
2014/05/06 Javascript
JavaScript中神奇的call()方法
2015/03/12 Javascript
jquery动画效果学习笔记(8种效果)
2015/11/13 Javascript
Angular中$compile源码分析
2016/01/28 Javascript
快速使用Bootstrap搭建传送带
2016/05/06 Javascript
canvas实现流星雨的背景效果
2017/01/13 Javascript
Javascript中document.referrer隐藏来源的方法
2017/01/16 Javascript
网页中右键功能的实现方法之contextMenu的使用
2017/02/20 Javascript
BetterScroll 在移动端滚动场景的应用
2017/09/18 Javascript
解决layui下拉框监听问题(监听不到值的变化)
2019/09/28 Javascript
Python之re操作方法(详解)
2017/06/14 Python
python对列进行平移变换的方法(shift)
2019/01/10 Python
详解Python连接MySQL数据库的多种方式
2019/04/16 Python
Python Gitlab Api 使用方法
2019/08/28 Python
Python处理session的方法整理
2019/08/29 Python
Python实现寻找回文数字过程解析
2020/06/09 Python
Python3爬虫中识别图形验证码的实例讲解
2020/07/30 Python
python从PDF中提取数据的示例
2020/10/30 Python
学生个人的自我评价分享
2013/11/05 职场文书
开展创先争优活动总结
2014/08/28 职场文书
个人收入证明模板
2014/09/18 职场文书
2014年宣传工作总结
2014/11/18 职场文书
2014年学生党支部工作总结
2014/12/20 职场文书
2015年教师党员个人总结
2015/11/24 职场文书
2016年六一儿童节开幕词
2016/03/04 职场文书
Html5大屏数据可视化开发的实现
2021/06/11 HTML / CSS