Vue父组件向子组件传递一个动态的值,子组件如何保持实时更新实时更新?
最近用vue做一个新项目,经历了各种折磨,每次遇到问题都想大喊,格劳资上JQuery,氮素肯定是不行的,今天遇到一个小问题,Vue父组件向子组件传递一个动态的值,子组件只能获取初始值,不能实时更新?
这就有点折磨人了,设想的是,父组件发生变化获取数据,动态传递给子组件,子组件实时刷新视图。vue视图是数据驱动的嘛,这设想就是完美而合理的了吧。可就是不行!!!!
请教前辈,支个招让用vuex,可就是个小功能能,有点杀鸡用牛刀啊,又去查了查文档,找了找资料。原来需要在子组件watch(监听)父组件数据的变化。
我就这样使用watchl啦,
data() {
return {
frontPoints: 0
} },
watch: {
frontPoints(newValue, oldValue) {
console.log(newValue)
}
}
咦?又出幺蛾子了,完全监听不到嘛!!!
继续查文档,好嘛,原来这种方式只能watch基础类型的变量,我传递的是个object啊,代码,真的处处是坑。。。
为了防止将来继续掉坑,做个总结吧
1、普通watch
如上所示,用过vue的都应该挺熟悉的
2、数组的watch
data() {
return {
winChips: new Array(11).fill(0)
}
},
watch: {
winChips: {
handler(newValue, oldValue) {
for (let i = 0; i < newValue.length; i++) {
if (oldValue[i] != newValue[i]) {
console.log(newValue)
}
}
},
deep: true
}
}
data() {
return {
bet: {
pokerState: 53,
pokerHistory: 'local'
}
}
},
watch: {
bet: {
handler(newValue, oldValue) {
console.log(newValue)
},
deep: true
}
}
tips: 只要bet中的属性发生变化(可被监测到的),便会执行handler函数;
如果想监测具体的属性变化,如pokerHistory变化时,才执行handler函数,则可以利用计算属性computed做中间层。
事例如下:
4、对象的具体属性watch(活用computed)
data () {
return {
bet: {
pokerState: 53,
pokerHistory: 'local'
}
}
},
computed: {
pokerHistory() {
return this.bet.pokerHistory
}
},
watch: {
pokerHistory(newValue, oldValue) {
console.log(newValue)
}
}
Vue父组件向子组件传递一个动态的值,子组件如何保持实时更新实时更新?的更多相关文章
- Vue在v-for中给css传递一个数组参数
需求就是将很多个数据,以进度条的形式展示在页面上,形成一个可视化. 接下来是html代码 <!DOCTYPE html> <html> <head> <tit ...
- Blazor和Vue对比学习(基础1.4):事件和子传父
Blazor和Vue的组件事件,都使用事件订阅者模式.相对于上一章的组件属性,需要多绕一个弯,无论Blazor还是Vue,都是入门的第一个难点.要突破这个难点,一是要熟悉事件订阅模式<其实不难& ...
- React组件导入的两种方式(动态导入组件的实现)
一. react组件两种导入方式 React组件可以通过两种方式导入另一个组件 import(常用) import component from './component' require const ...
- vue 父向子组件传递数据,子组件向父组件传递数据方式
父组件向子组件传递数据通过props,子组件引入到父组件中,设置一个值等于父组件的数据,通过:bind将数据传到子组件中,子组件中通过props接收父组件的数据,这样就可以使用父组件的数据了,循环组件 ...
- Vue父组件与子组件传递事件/调用事件
1.Vue父组件向子组件传递事件/调用事件 <div id="app"> <hello list="list" ref="child ...
- 详解vue父组件传递props异步数据到子组件的问题
案例一 父组件parent.vue // asyncData为异步获取的数据,想传递给子组件使用 <template> <div> 父组件 <child :child-d ...
- [转]详解vue父组件传递props异步数据到子组件的问题
原文地址:https://www.cnblogs.com/goloving/p/9114389.html 案例一 父组件parent.vue // asyncData为异步获取的数据,想传递给子组件使 ...
- Vue 父组件往子组件传递方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue父子组件通信(父级向子级传递数据、子级向父级传递数据、Vue父子组件存储到data数据的访问)
Vue父子组件通信(父级向子级传递数据.子级向父级传递数据.Vue父子组件存储到data数据的访问) 一.父级向子级传递数据[Prop]: ● Prop:子组件在自身标签上,使用自定义的属性来接收外界 ...
随机推荐
- Quartz.NET学习笔记(二) Job和JobDetails
Job和JobDetails的关系 接一篇的例子 ISchedulerFactory schedFact = new StdSchedulerFactory(); IScheduler sched = ...
- shell实战之Linux主机系统监控
1.系统监控概述 采集的监控信息主要有内存占用率,CPU占用率,当前在线用户,磁盘挂载及磁盘空间使用率,平均每秒写入流量,平均每秒流出流量.磁盘IO:平均每秒从磁盘读入内存的速率,平均每秒从内存写入磁 ...
- 线程安全(中)--彻底搞懂synchronized(从偏向锁到重量级锁)
接触过线程安全的同学想必都使用过synchronized这个关键字,在java同步代码快中,synchronized的使用方式无非有两个: 通过对一个对象进行加锁来实现同步,如下面代码. synchr ...
- 淘宝npm镜像使用方法(转)
1.临时使用 npm --registry https://registry.npm.taobao.org install express 2.持久使用 npm config set registry ...
- 环境与工具1:微信群刷屏 | itchat
在微信群里面,"刷屏"的行为是被谴责的,伴随着"快发红包道歉"与"送飞机票"的出现.那如果小程硬是要做到"刷屏"来验证自 ...
- 痞子衡嵌入式:ARM Cortex-M内核那些事(2)- 第一款微控制器
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是第一款Cortex-M微控制器. 1.天生荣耀:ARM Cortex-M处理器由来 ARM公司自2004年推出ARMv7内核架构时,摒弃 ...
- 浅析java程序的执行过程
在研究任何一门语言时,无论是面向过程的c,c++(面向过程和面向对象),还是面向对象的.net,java等,弄清语言执行过程至关重要. 何为语言执行过程? 所谓语言执行过程,指对于任何一门语言,如j ...
- Swing——简单的计算器
前言 这是博主学习完Swing后,使用Swing实现的一个简单计算器.做简单的计算器的目的是将最近所学的Swing给应用起来,写博文介绍的目的是记录做这个计算器的思路.下面将分为界面和事件两部分介绍. ...
- [Css] css3的flex布局
flex思维导图 {"name":"flex","children":[{"name":"传统布局方式&quo ...
- __tostring()和__invoke()的用法
PHP有很多内置的魔术方法,这里我们聊哈tostring和involk吧. __tostring()魔术方法 将一个对象当做一个字符串来使用时,会自动调用该方法,并且在该方法中,可以返回一定的字符串, ...