首先:我们需要在父组件中标签中定义一个 ref=“parentObjVue”

其次:我们在子组件中,通过  var tmp=this.$refs.parentObjVue找到父组件。

然后:我们在子组件中这样去写(例如监听父组件中的一个gdata属性)

tmp.$watch('gdata',(newVal,oldVal)=>{
// 这里就是gdata数据发生变化的时候具体的操作内容,同在自己的组件当中使用watch一样。
})

vue中如何在子组件添加类似于watch属性监听父组件数据,数据变化时子组件做出相应的动作的更多相关文章

  1. Vue ---- 表单指令 条件指令 循环指令 分隔符 过滤器 计算属性 监听属性

    目录 案例讲解: 一. 表单指令 1.重点: 补充 2.单选框 3.单一复选框 4.多复选框 二 . 条件指令 v-if/v-show ... v-clock 三 . 循环指令 string arra ...

  2. Vue中,给当前元素添加类名移除兄弟元素类名的方法

    在Vue中,给当前元素添加类名移除兄弟元素类名的方法 今天在项目中需要做一个效果,点击对应的li改变当前的color,其他的li取消颜色,在jQuery中这很容易,由于之前已经引入了jQuery,所以 ...

  3. vue2.x版本中Object.defineProperty对象属性监听和关联

    前言 在vue2.x版本官方文档中 深入响应式原理 https://cn.vuejs.org/v2/guide/reactivity.html一文的解释当中,Object.defineProperty ...

  4. vue 如何在循环中 "监听" 的绑定v-model数据

    vue 如何在循环中 "监听" 的绑定v-model数据 阅读目录 vue 如何在循环中 "监听" 的绑定v-model数据 1. 普通属性的值进行监听 2. ...

  5. Vue 变量,成员,属性监听

    Vue变量 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF ...

  6. Vue之计算属性Computed和属性监听Watch,Computed和Watch的区别

    一. 计算属性(computed) 1.计算属性是为了模板中的表达式简洁,易维护,符合用于简单运算的设计初衷. 例如: <div id="app"> {{ myname ...

  7. Vue.js之计算属性(computed)、属性监听(watch)与方法选项(methods)

    vue.js官网:https://cn.vuejs.org/v2/guide/components-registration.html 一.计算属性-computed 1. 作用:能够避免数据冗余,通 ...

  8. highcharts图表组件入门教程:如何监听柱状图柱子点击事件动态更新当前数据点数值和所对应X轴刻度

    highcharts图表组件入门教程:如何监听柱状图柱子点击事件动态更新当前数据点数值和所对应X轴刻度 作者:highcharts | 时间:2014-6-11 14:07:05 | [小  大] | ...

  9. vue对象属性监听

    对象属性监听的两种方法: 1.普通的watch data() { return { frontPoints: 0 } }, watch: { frontPoints(newValue, oldValu ...

  10. 12.vue属性.监听.组件

    1.计算属性 https://cn.vuejs.org/v2/guide/computed.html new Vue({ computed:{//定义 show(){ } } }) ++计算属性1.h ...

随机推荐

  1. 一个简单的rust字符串时钟

    1.简介   用rust写的一个简单的练手的demo,一个字符串时钟,在终端用字符串方式显示当前时间.本质是对图片取灰度,然后每个像素按灰度门限用星号代替灰度值,就把图片变为由星号组成的字符型图案.把 ...

  2. [常用工具] C++环境下Qt的安装

    文章目录 1 Qt(C++)版本的选择 2 Qt 安装 2.1 Qt 6.3.1的安装 2.2 Qt 5.14.2的安装 3 Qt 其他版本安装 1 Qt(C++)版本的选择 Qt(C++)是一个跨平 ...

  3. [LeetCode]数组拆分 I

    题目 代码 class Solution { public: int arrayPairSum(vector<int>& nums) { std::sort(nums.begin( ...

  4. 计组Review1

    1GB的内存,它是以字节编址的,假设内存地址为32位,128KB的高速缓存.现在有一个数据位于0x123456(字节编址),会映射到那些不同情形的内存单元上,还有TAG和总缓存大小. 1. 直接映射, ...

  5. Coolify系列01- 从0到1超详细手把手教你上手Heroku 和 Netlify 的开源替代方案

    什么是Coolify 一款超强大的开源自托管 Heroku / Netlify 替代方案 coolLabs是开源.自托管和以隐私为中心的应用程序和服务的统称 为什么使用Coolify 只需单击几下即可 ...

  6. flutter 底部滑动导航,页面滑动同时让底部导航跟着变动,除了点击还可以滑动哦~~

    实现点击以及滑动都可以切换导航的效果 核心代码 完整代码 // 输入 imrm 快速生成下面 import 'package:flutter/material.dart'; import 'Home. ...

  7. ElasticSearch分布式搜索引擎——从入门到精通

    ES分布式搜索引擎 注意: 在没有创建库的时候搜索,ES会创建一个库并自动创建该字段并且设置为String类型也就是text 什么是elasticsearch? 一个开源的分布式搜索引擎,可以用来实现 ...

  8. 动态代理-cglib分析

    生成代理类文件的方式 jvm添加此启动参数,后面就是代理类class生成的地址 -Dcglib.debugLocation=~/baldhead/java/dynamic-proxy-cglib/sr ...

  9. Kubernetes(k8s)控制器(三):ReplicationController

    目录 一.系统环境 二.前言 三.ReplicationController概览 四.ReplicationController工作机制 五.创建ReplicationController 六.扩展r ...

  10. XMind 2022 Win/macOS 使用教程

    XMind简介 XMind 2022 Win/macOS (强大的思维导图软件).XMind 是一款让你专注思维,捕捉每一个灵感瞬间的 App.每当萌生新想法时,「XMind」帮你专注于它的扩展延伸和 ...