关于vue中props中数据发生改变时及时更新到页面渲染上

公孙胜
• 阅读 11145

通常情况下我们渲染子组件时,根据业务需求会需要从父级传递数据到该子组件进行渲染。
一般情况下如果子组件是单次渲染或者该页面中该子组件只渲染一次的话,只需要将props中的数据直接赋值到data中完成渲染即可。
关于vue中props中数据发生改变时及时更新到页面渲染上
或者直接在组件中使用props中传递过来的值也可以,不必再赋值到data中。我这边赋值到data中主要是为了后续使用该数据方便。

但是,在实际生产过程中,我们需要在一个页面上渲染该子组件多次,这就会导致组件之间的值会出现错乱,比如A处子组件的值展示的是B处子组件的值。这时我们需要使用到vue中的computed和watch完成props中数据到子组件的及时更新。
关于vue中props中数据发生改变时及时更新到页面渲染上
在template渲染中,需要将对应的值修改为computed中返回的值:
关于vue中props中数据发生改变时及时更新到页面渲染上

具体原因后有机会补充,如有错误请指正。

点赞
收藏
评论区
推荐文章
Chase620 Chase620
4年前
vue的8种通信方式
1.props/emit1.父组件向子组件传值下面通过一个例子说明父组件如何向子组件传递数据:在子组件article.vue中如何获取父组件section.vue中的数据articles:\'红楼梦','西游记','三国演义'\//section父组件<template<divclass"section"
Easter79 Easter79
3年前
Vue 组件实现数据双向绑定(el
一、组件vmodel值通过props传入,必须定义为value!(https://oscimg.oschina.net/oscnet/66e6fa03cb5d23a24fd7d45e5e782b125ec.png)二、将传入的value在data中重新定义赋值,以便子组件改变值(子组件中不能直接修改props
Chase620 Chase620
4年前
Vue面试考点准备02
10\.谈谈你对keepalive的理解是什么?keepalive是Vue提供的一个抽象组件,用来对组件进行缓存,当组件切换时不会进行销毁,从而节省性能。由于是一个抽象组件,所以在页面渲染完毕后不会被渲染成一个DOM元素。1)include定义缓存白名单,keepalive会缓存命中的组件;2)exclude定义缓存黑名单
Stella981 Stella981
3年前
React的单向数据流与组件间的沟通
今天来给大家总结下React的单向数据流与组件间的沟通。首先,我认为使用React的最大好处在于:功能组件化,遵守前端可维护的原则。先介绍单向数据流吧。React单向数据流:React是单向数据流,数据主要从父节点传递到子节点(通过props)。如果顶层(父级)的某个props改变了,React会重渲染所有的子节点。刚才我们提到了
Easter79 Easter79
3年前
VUE+ElementUI布局随笔
1.elcontainer标签非必须。2.每一个vue文件中,所有的html代码都应该写在同一个dom中,否则会报错。3.elaside默认宽度为300px,可以通过在标签中修改width属性来调整。4.若routerview想通过name属性来指定渲染的组件,则在router.js中,该组件在注册时,必须是component
Stella981 Stella981
3年前
FLutter父子组件通信
本文介绍flutter父子组件数据传递和回调.还是以之前的代码为例Flutter\_DayByDay(https://gitee.com/Royce_he/Flutter_DayByDay)由于之前用ReactNative写项目,顺便对比一下RN父组件直接在xml标签中写属性{值/方法},子组件通过props去取属性和方法
Stella981 Stella981
3年前
Lightning Web Components html_templates(三)
LightningWebComponents强大之处在于模版系统,使用了虚拟dom进行智能高效的组件渲染。使用简单语法以声明方式将组件的模板绑定到组件的JavaScript类中的数据数据绑定我们可以使用{property}绑定组件模版属性到一个组件js类中的属性一个简单的例子组件class
Stella981 Stella981
3年前
ElementUI的表格树(树型结构表格),很简单方式,el
效果:!(https://oscimg.oschina.net/oscnet/5385e039e9c357d0df15adccd28acc52e0c.png)在eltable中,支持树类型的数据的显示。当row中包含 children 字段时,被视为树形数据。渲染树形数据时,必须要指定 rowkey。支持子节点数据异步加载。设
React memo的原理、实践与思考
前言在react中,对一个组件进行点击事件等操作时,该组件以及该组件的子组件都会重新渲染。避免组件的重新渲染一般可以借助React.memo、useCallback等来实现。什么是memomemo原理memo类似于class中pureComponent的特
taskbuilder taskbuilder
7个月前
TaskBuilder触发前端组件请求后台服务的常见事件
当以下事件发生时,可能会触发相关前端组件向后台服务发起请求:4.3.1页面加载时这种情况主要用于数据查询,在前端页面加载完毕后(页面静态内容渲染完毕),会自动判断页面里的每个前端组件是否设置了数据查询操作,如果设置了,则自动请求相应的后台服务进行数据查询,
程序员一鸣 程序员一鸣
2个月前
鸿蒙开发:Navigation路由组件使用由繁入简
Navigation是路由容器组件,一般作为首页的根容器,也就是说,我们只在首页面使用即可,对于所有的子页面使用NavDestination即可,项目中的页面,无外乎首页面和子页面,首页面还好,书写一次即可,而子页面就非常非常的多了,所以,需要针对模版进行抽取。