vue中如何在子组件添加类似于watch属性监听父组件数据,数据变化时子组件做出相应的动作
首先:我们需要在父组件中标签中定义一个 ref=“parentObjVue”
其次:我们在子组件中,通过 var tmp=this.$refs.parentObjVue找到父组件。
然后:我们在子组件中这样去写(例如监听父组件中的一个gdata属性)
tmp.$watch('gdata',(newVal,oldVal)=>{
// 这里就是gdata数据发生变化的时候具体的操作内容,同在自己的组件当中使用watch一样。
})
vue中如何在子组件添加类似于watch属性监听父组件数据,数据变化时子组件做出相应的动作的更多相关文章
- Vue ---- 表单指令 条件指令 循环指令 分隔符 过滤器 计算属性 监听属性
目录 案例讲解: 一. 表单指令 1.重点: 补充 2.单选框 3.单一复选框 4.多复选框 二 . 条件指令 v-if/v-show ... v-clock 三 . 循环指令 string arra ...
- Vue中,给当前元素添加类名移除兄弟元素类名的方法
在Vue中,给当前元素添加类名移除兄弟元素类名的方法 今天在项目中需要做一个效果,点击对应的li改变当前的color,其他的li取消颜色,在jQuery中这很容易,由于之前已经引入了jQuery,所以 ...
- vue2.x版本中Object.defineProperty对象属性监听和关联
前言 在vue2.x版本官方文档中 深入响应式原理 https://cn.vuejs.org/v2/guide/reactivity.html一文的解释当中,Object.defineProperty ...
- vue 如何在循环中 "监听" 的绑定v-model数据
vue 如何在循环中 "监听" 的绑定v-model数据 阅读目录 vue 如何在循环中 "监听" 的绑定v-model数据 1. 普通属性的值进行监听 2. ...
- Vue 变量,成员,属性监听
Vue变量 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF ...
- Vue之计算属性Computed和属性监听Watch,Computed和Watch的区别
一. 计算属性(computed) 1.计算属性是为了模板中的表达式简洁,易维护,符合用于简单运算的设计初衷. 例如: <div id="app"> {{ myname ...
- Vue.js之计算属性(computed)、属性监听(watch)与方法选项(methods)
vue.js官网:https://cn.vuejs.org/v2/guide/components-registration.html 一.计算属性-computed 1. 作用:能够避免数据冗余,通 ...
- highcharts图表组件入门教程:如何监听柱状图柱子点击事件动态更新当前数据点数值和所对应X轴刻度
highcharts图表组件入门教程:如何监听柱状图柱子点击事件动态更新当前数据点数值和所对应X轴刻度 作者:highcharts | 时间:2014-6-11 14:07:05 | [小 大] | ...
- vue对象属性监听
对象属性监听的两种方法: 1.普通的watch data() { return { frontPoints: 0 } }, watch: { frontPoints(newValue, oldValu ...
- 12.vue属性.监听.组件
1.计算属性 https://cn.vuejs.org/v2/guide/computed.html new Vue({ computed:{//定义 show(){ } } }) ++计算属性1.h ...
随机推荐
- table表格的合并
如上图,实现单元格合并功能,不多说,直接上代码 一,添加 :span-method="objectSpanMethod" <el-table :key="ti ...
- 如何使用Redis和RabbitMQ实现一个学生抢课系统(可类比商品秒杀系统)
1.如何使用Redis和RabbitMQ实现一个学生抢课系统(可类比商品秒杀系统) 电商项目中的秒杀场景我们都很常见,不只是京东和淘宝现在很多的小程序公众号也有做现时限购的秒杀场景,那么如何做一个秒杀 ...
- Ubuntu 22.04 BigSur 美化
安装 tweaks sudo apt update && sudo apt upgrade sudo apt install gnome-tweaks gnome-shell-exte ...
- mysql常用命令,检查数据库连接情况以及修改时区
常用操作 注:也可以运行 mysql -u 用户名(root) -p 密码(root) 数据库名(bank) ,然后回车 导入文件:source e:bank.sql (你的sql文件) 回车 PS ...
- react系列-从0开始搭建一个react项目
从0开始搭建一个react项目 1.安装脚手架 npm install -g create-react-app 2.创建项目 D: //进入D盘 mkdir ReactDemo //创建ReactDe ...
- 自从学习了MongoDB高可用,慢慢的喜欢上了它,之前确实冷落了
大家好,我是哪吒,最近项目在使用MongoDB作为图片和文档的存储数据库,为啥不直接存MySQL里,还要搭个MongoDB集群,麻不麻烦? 让我们一起,一探究竟,继续学习MongoDB高可用和片键策略 ...
- 网络通讯协议分类-IP地址
网络通讯协议分类 通信的协议还是比较复杂的,java.net包中包含的类和接口,它们提供低层次的通信细节.我们可以直接使用这些类和接口,来专注于网络程序开发,而不用考虑通信的细节. java.net包 ...
- Java入门与进阶P-4.5+P-4.6
逻辑类型 关系运算的结果是要给逻辑值,true或false.这个值可以保存在一个对应的逻辑类型变量中,这样的变量类型是boolean 布尔是为了纪念George Boole对逻辑计算得到贡献 bool ...
- 12月12日内容总结——Django之数据增删改查、Django请求生命周期流程图、Django路由层(路由匹配、转换器、正则匹配)、反向解析
目录 一.可视化界面之数据增删改查 二.django请求生命周期流程图 三.django路由层 1.路由匹配 2.转换器 3.正则匹配 不同版本的区别 正则匹配斜杠导致的区别 4.正则匹配的无名有名分 ...
- maven打包失败 Cannot create resource output directory
转https://blog.csdn.net/wuyuanshun/article/details/103097447 maven clean后打包出现Cannot create resource o ...