首页 > 其他分享 >vue父组件值更新子组件没更新

vue父组件值更新子组件没更新

时间:2023-09-20 22:07:45浏览次数:48  
标签:vue watch value newVal num 更新 组件

因为父组件和子组件的数据单向绑定关系,子组件中的数据并不是从父组件中获取的而是通过props传递的。因此只更新父组件的数据不会自动更新子组件中的数据。

需要在子组件中通过watch监听num的变化,将最新的值传递给变量,从而更新展示。

点击清空button会把num重新赋值,自动触发watch监听函数,并将最新的值传递给子组件,从而实现了双向绑定的效果

<template>
	<div>
  	<child :mounted="num"></child>
    <button @click="clearMounted">清空</button>
  <div>
</template>
<script>
	data() {
  	num: 1,
  },
	methods: {
  	clearMounted() {this.num = null;}
  },
</script>



<template>
	<div>
  	<div @click="value+1">功德 +{{value}}</div>
  </div>
</template>

<script>
	export deafult {
  	props: {
    	num: Number
    },
    watch: {
    	num(newVal) {
      	this.value = newVal;
      }
    },
    mounted: {
    	this.value = num;
    },
  	data() {
    	return {
      	
      }
    },
  }
</script>

标签:vue,watch,value,newVal,num,更新,组件
From: https://blog.51cto.com/u_15694202/7542712

相关文章

  • Vue3引入滑块验证组件-2分钟搞定
    手把手视频地址:https://www.bilibili.com/video/BV1Nu4y1r7Wr/安装npminstall--savevue3-slide-verify登录页面引入template下<template><divclass="login"> <el-cardclass="cover"v-if="loginUser.data.user"> <slide......
  • Python从入门到实战-Scrapy源码2-核心组件
    Scrapy核心组件本篇文章解决:Scrapy有哪些核心组件?以及它们主要负责了哪些工作?这些组件为了完成这些功能,内部又是如何实现的?爬虫类上次讲到Scrapy运行起来后,执行到最后到了Crawler的crawl方法,我们来看这个方法:@defer.inlineCallbacksdefcrawl(self,*args,**kwargs)......
  • 【Vue】定义配置方法&数据代理
    hello,我是小索奇,精心制作的Vue教程持续更新哈,想要学习&巩固&避坑就一起学习叭~Object定义配置方法代码引出数据代理,先上代码,后加解释<!DOCTYPEhtml><html><head><metacharset="UTF-8"/><title>回顾Object.defineproperty方法</title></head><body&......
  • Vue-基本语法及事件绑定
    一.基本语法v-bind绑定:双大括号不能在HTMLattributes中使用。想要响应式地绑定一个attribute,应该使用 v-bind 指令代码展示:<divid="app"><spanv-bind:title="message"v-html="tips"></span></div><script>letvue=newVue(......
  • 蓝牙mesh1.1更新尝鲜
    蓝牙mesh协议1.1前言万众期待的蓝牙mesh协议版本时隔4年之久,在2023年9月终于迎来一轮新的版本更新,从2017年7月1.0初版协议发布,再到2019年1月1.0.1小版本更新。算起来整个蓝牙mesh协议已经很久没有更新了,那么这次蓝牙联盟更新的这个大版本协议有什么令人期待的呢?又有什么大招被蓝......
  • bus兄弟组件传值
    bus兄弟组件传值,注意:1、监听时机要比发送时机早2、这两个组件不要按需引入,不然会导致首次收不到传的值例:在组件1的mounted里面发送值:this.$bus.$emit('selected',true)在组件2的created里面监听值:this.$bus.$on("selected",(data)=>{})......
  • vue样式穿透
    本文转载自https://www.jb51.net/article/253428.htm#_label0,转载仅供学习使用.scoped属性我们在vue组件写样式一般是在<style>标签里面,但是我们在这里的样式默认是全局样式,如果其它组件的class名取重复了则会导致样式污染。所以vue支持在<style>标签添加scoped属性,这样当前组......
  • 15-Vue核心-列表过滤和列表排序
    列表过滤 监视属性,实现列表过滤<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>基本列表</title><!--引入Vue--><scripttype="text/javascript......
  • vuejs+antv-g6绘制图表
    该内容包括antv-g6官网地址、antv-g6的基本使用(包括自定义节点、常用插件(右键菜单等)、基本事件、目前我所遇到的一些需求)。1、antv-g6的官网地址:https://g6.antv.antgroup.com/examples2、安装antv-g6组件npminstall@antv/g6 3、创建antvView.vue文件使用antv/g6......
  • Ant Design Vue 中的tab组件中,获取不到$ref
    问题:在tab的组件中引入了一个组件,在页面渲染时,需要用到子组件bpmnModeler里面的方法,调用this.$ref.bpm的时候报错了,找不到bpm<a-tab-panekey="3"tab="流程图"><divclass="search"><a-card><a-rowstyle="positi......