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 相关文章推荐
JQuery live函数
Dec 24 Javascript
javascript自执行函数之伪命名空间封装法
Dec 25 Javascript
js中字符替换函数String.replace()使用技巧
Aug 14 Javascript
document.documentElement的一些使用技巧
Apr 18 Javascript
AngularJs Forms详解及简单示例
Sep 01 Javascript
微信小程序 底部导航栏目开发资料
Dec 05 Javascript
Bootstrap CSS组件之面包屑导航(breadcrumb)
Dec 17 Javascript
ES6概念 Symbol.keyFor()方法
Dec 25 Javascript
微信小程序实现tab切换效果
Nov 21 Javascript
vue项目中导入swiper插件的方法
Jan 30 Javascript
详解微信小程序中var、let、const用法与区别
Jan 11 Javascript
Openlayers测量距离与面积的实现方法
Sep 25 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获取文件名后缀
2013/06/09 PHP
php number_format() 函数通过千位分组来格式化数字的实现代码
2013/08/06 PHP
PHP常用字符串函数小结(推荐)
2018/08/05 PHP
Laravel 连接(Join)示例
2019/10/16 PHP
javascript动态加载二
2012/08/22 Javascript
Js,alert出现乱码问题的解决方法
2013/06/19 Javascript
js获取IP地址的方法小结
2014/07/01 Javascript
深入浅析JavaScript中prototype和proto的关系
2015/11/15 Javascript
Angular.JS中指令ng-if的注意事项小结
2017/06/21 Javascript
基于EasyUI的基础之上实现树形功能菜单
2017/06/28 Javascript
微信小程序 获取javascript 里的数据
2017/08/17 Javascript
vue click.stop阻止点击事件继续传播的方法
2018/09/04 Javascript
WebSocket的简单介绍及应用
2019/05/23 Javascript
使用PreloadJS加载图片资源的基础方法详解
2020/02/03 Javascript
JS 创建对象的模式实例小结
2020/04/28 Javascript
jQuery实现放大镜案例
2020/10/19 jQuery
Python脚本简单实现打开默认浏览器登录人人和打开QQ的方法
2016/04/12 Python
windows10系统中安装python3.x+scrapy教程
2016/11/08 Python
python 连接sqlite及简单操作
2017/06/30 Python
python进阶_浅谈面向对象进阶
2017/08/17 Python
对python多线程中Lock()与RLock()锁详解
2019/01/11 Python
初探利用Python进行图文识别(OCR)
2019/02/26 Python
Pandas读写CSV文件的方法示例
2019/03/27 Python
pyqt弹出新对话框,以及关闭对话框获取数据的实例
2019/06/18 Python
pandas中的数据去重处理的实现方法
2020/02/10 Python
使用Python文件读写,自定义分隔符(custom delimiter)
2020/07/05 Python
Html5移动端网页端适配(js+rem)
2021/02/03 HTML / CSS
找到您丢失的钥匙、钱包和手机:Tile
2017/05/19 全球购物
激光脱毛、蓝光和护肤:Tria Beauty
2019/03/28 全球购物
技术总监岗位职责
2013/12/05 职场文书
优秀教师申报材料
2014/12/16 职场文书
2016元旦主持人开场白
2015/12/03 职场文书
小学语文新课改心得体会
2016/01/22 职场文书
给原生html中添加水印遮罩层的实现示例
2021/04/02 Javascript
python面向对象版学生信息管理系统
2021/06/24 Python
MySQL修改默认引擎和字符集详情
2021/09/25 MySQL