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 ...
随机推荐
- 用python 协程 爬百度小说西游记
前言 方法,不止一种,有不同见解可以一起讨论 "" 使用协程爬取百度小说中的西游记整部小说 """ import asyncio import aio ...
- DSS+Linkis Ansible 单机一键安装脚本
DSS+Linkis Ansible 单机一键安装脚本 一.简介 为解决繁琐的部署流程,简化安装步骤,本脚本提供一键安装最新版本的DSS+Linkis环境:部署包中的软件采用我自己编译的安装包,并且为 ...
- 一步步教你在Edge浏览器上安装网风笔记
微软于2022年6月15日正式结束对浏览器"Internet Explorer (IE)"的支持,IE已正式退出历史舞台,取而代之的是目前风头正盛的被微软称为当今最好用的Edge浏 ...
- 面对集中式缓存实现上的挑战,Redis交出的是何种答卷?聊聊Redis在分布式方面的能力设计
大家好,又见面了. 本文是笔者作为掘金技术社区签约作者的身份输出的缓存专栏系列内容,将会通过系列专题,讲清楚缓存的方方面面.如果感兴趣,欢迎关注以获取后续更新. 在本专栏前面的文章中,我们介绍了各种本 ...
- NSOperation的简单使用
1.默认情况下,NSOperation并不具备封装操作的能力,必须使用它的子类,使用NSOperation子类的方式有3种: 1> NSInvocationOperation 2> NSB ...
- 从0到1手把手实现vite
什么是Vite? 法语:轻量化,快速 基于VUE3 非 打包开发服务器,请注意,它是个开发服务器哇!! 快速开发,按需编译,不再等待整个应用编译完成 基于原生模块系统ESModule实现 说白了,就是 ...
- 保姆级教程-分分钟掌握常用TS语法
十分钟就搞懂TS用法 先全局安装一些工具,有助于我们编写运行代码哦 1.VScode插件 code runner 2.安装依赖 npm install typescript ts-node -g 开始 ...
- 今天学到的新知识--自己的电脑可以像Github Pages、码云 Pages一样发布静态资源
大佬教我的,感觉这个很神奇哦 假设下面这个路径是我的本地电脑静态资源路径 打开powershell窗口 然后按照下图的样子执行命令 复制网址就可以访问啦 然后可以通过 https://iplocati ...
- DML_修改数据
DML_修改数据 修改数据: 语法: update 表名 set 列名1 = 值1,列名2 = 值2, ... [ where 条件 ] ; 注意: 1. 如果不加任何条件,则会将表中所有记录全部修改 ...
- 前端基础知识-react(一)个人学习记录 _
待补充 reactive和ref