【vue】prop更新，子组件不重新渲染的解决方法

最新推荐文章于 2024-01-05 14:54:00 发布
最新推荐文章于 2024-01-05 14:54:00 发布
阅读量5.1k 收藏 1
点赞数 1
分类专栏： vue 文章标签： vue js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34838046/article/details/108819103
版权

1.添加prop的侦听器

props:['xxx'],
data(){
return{
	yyy
}
}
...
watch:{
	xxx:function(newValue){
		this.yyy=newValue	
	}
}
前端二狗子
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
【vue】【element-ui】【错误记录】vue使用element-ui时，.native点击事件触发两次
qq_34838046的博客
10-07 1264
文章目录现象解决方法原因 现象 使用element-ui的组件el-checkbox，绑定点击事件 <el-checkbox @click="state()"></el-checkbox> 点击事件不触发 添加.native标签之后，触发了事件，但是触发了两次 <el-checkbox @click.native="state()"></el-checkbox> 解决方法 通过事件对象元素的类型，过滤事件 修改为 <el-ch
【vue】【express】跨域的原因以及解决方案（vue+express）
qq_34838046的博客
10-05 735
文章目录基础 基础
vue 通过 Prop 向子组件传递数据的实现方法
01-21
这是一个通过 Prop 向子组件传递数据的小例子。 代码： <!DOCTYPE html> <html lang=zh-cmn-Hans> <head> <meta charset=UTF-8> <title></title> <style> *{ margin: 0; padding: 0; text-decoration: none; } </style> </head> <body> <div id=app> <!--数据的渲染-->
Vue关于父组件更新子组件子组件不重新渲染最新数据的问题
attengtiong的博客
10-27 1万+
父beforeUpdate ->子beforeUpdate ->子updated ->父updated 父组件更新，子组件一定会重新渲染，但子组件重新渲染只会走它的beforeUpdate和uptated这些周期函数，data不会重新执行，如果刚开始第一次渲染的时候，把属性都挂载到当前组件的data中，只有第一次渲染子组件才会执行，不管以后对子组件怎么刷新都不起作用 父组件 <template> <div id="app"> <son :.
vue2中为什么修改数据不重新渲染？
用户什么都没有写。
07-24 788
组件状态没有定义成响应式的数据？？更改时不会更新视图？？
vue父组件给子组件传值，子组件不渲染的原因及解决方法
最新发布
预见的力量
01-05 1744
父组件传递给子组件的数据，如果是一个复杂对象（例如一个数组或对象），那么子组件只会监听对象的引用而不是对象的内容。这意味着当对象的内容发生变化时，子组件不会更新。3、数据发生变化后，在下面调用一下splice方法修改原数组长度（索引、截取长度都为0），数组不变，但视图可成功渲染。1、在子组件使用 watch 监听 props传过来的值，如果发现改变，调用forceUpdate刷新视图。2、父组件中声明一个布尔变量，数据发生变化后，切换一下变量状态，可刷新子组件视图。
当父组件的对象值发生改变的时候，子组件没有重新进行渲染？
Kerryliuyue的博客
09-04 2298
当在页面使用子组件时，页面进行渲染时，子组件已经进行渲染，所以会出现当父组件的值进行修改时，子组件没有重新渲染。一般来说，父子组件传值，当父组件值变化时子组件的值也会实时变化，子组件使用prop接收数据。
当prop更改时,子组件没有更新
qq_43342124的博客
02-06 3801
问题：当prop更改时,子组件没有更新 已测试过父组件的state数据已改变，但子组件没有重新渲染 React 希望在创建子组件时高效。如果它与另一个子组件相同，则不会呈现新组件，这会使页面加载速度更快。 解决方法： （1）父组件 添加一个 Key 会强制 React 渲染一个新组件，从而重置该新组件的 State。 <FilterPicker key={this.state.openType} defaultValue={defaultValue} type={this.state.openTyp
vue开发过程中，修改了数据，但是页面死活不渲染改变！没变化！怎么办？6种方法解决~
热门推荐
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
07-05 1万+
通常是某个渲染的数组改变了层级较深的数据导致页面没有实时渲染就这么写 this.items=JSON.parse(JSON.stringify(this.items));
Vue数组踩坑日记props对象里面的部分数组改变无法重新渲染，视图没有根据数据变化。
qq_35189120的博客
10-17 8555
首先声明一个组件然后往组件里面丢对象 ； html是在渲染以后修改数组 js代码更改对象中的数组 ； ** vue有说明在数组直接通下标改变是不会被观察到的所以我试了(vue.set但是我并不是通过下标改变而是直接改变整个组数所以一样没用）** 2. 然后我又试试了强制更新this.$forceUpdate()这个倒是生效 后面我又尝试使用push来试试结果一样失败了。 但是具体为什么还是...
vue子组件更新数据 界面没有渲染
weixin_35757531的博客
01-03 980
如果 vue 子组件数据发生更新，但界面没有渲染，可能是因为您没有正确地使用数据绑定。 在 vue 中，当组件的数据发生变化时，界面会自动更新。要在组件中绑定数据，您需要使用花括号把变量名括起来，例如： <template> <div>{{ message }}</div> </template> <script> export d...
1.解决父组件传数据给子组件太慢，导致子组件获取不到合适数据渲染出错问题2.vue中props传递异步数据，子组件用watch监听
m0_55049655的博客
12-26 651
vue中props传递异步数据，子组件用watch监听
加速vue组件渲染之性能优化
11-20
平时在用vue开发后台管理系统的时候，应该会用到大量的table这种组件，正常这种组件我们会在项目里做二次封装，然后针对表头title做参数化配置，如下： export default { data(){ return { tableTitle:[ { ...
Vue函数式组件的应用实例详解
12-11
props：提供所有 prop 的对象children: VNode 子节点的数组slots: 一个函数，返回了包含所有插槽的对象scopedSlots: (2.6.0+) 一个暴露传入的作用域插槽的对象。也以函数形式暴露普通插槽。data：传递给组件的整个...
vue+element-ui动态生成多级表头的方法
12-29
vue+element html配置： <div id=table>{{tableData}} <el v-for='item in tableConfig' label=item.label prop='item.prop' width='item.width' key=item.id> <el-table-column v-if='item.children||item....
【vue】【vue.config.js】vue项目路径简写
qq_34838046的博客
10-05 764
const path = require('path'); const resolve = (dir) => path.join(__dirname, dir); module.exports = { //跨域代理设置 devServer: { proxy: { '/api': { target: 'http://localhost:3000', changeOrigin: true, pathRewrite: {
【vue】v-for列表渲染绑定key值出现的问题记录
qq_34838046的博客
09-26 486
以上为todolist项目中出现的问题 不能在一个页面中出现key值相同的相同组件 现象：当点击任务条的单选框切换分组时，原分组顶上来的任务条的单选框的选中状态，会跟之前的任务条上的单选框点击后的状态相同 原因：任务条组件复用，两分组均是使用v-for列表渲染多个任务条的，且，绑定key值为数组的下标 也就是说，同一个页面，会出现两个key值相同（两个都是分组第一个，则key都是0）的相同组件。 Vue内部会复用某些属性（详细原因未知） ...
【vue】Vue数据双向绑定原理及实现（持续更新。。。）
qq_34838046的博客
09-08 355
原理 使用Object.defineProperty() 进行数据劫持。主要为修改对象中数值的getter和setter函数 let person = {} let name = "张二狗" Object.defineProperty(person,"name",{ set:function(newValue){ //在此增加该数据被设置的时候的操作 //例如： console.log("set") name = newVa
vue2 子组件watch监听不到prop
05-01
Vue2 中的子组件可以通过 props 接收父组件传递过来的数据，但是在子组件中使用 watch 监听这些 prop 值的变化时可能会出现无法监听的情况。 这是因为在 Vue2 中，子组件在接收到父组件传递过来的 prop 值时，实际上是通过一次初始渲染来完成的。这意味着如果在子组件中使用 watch 监听 prop 值的变化，只会在初始渲染时执行一次，而无法在之后的变化中再次监听到。 要解决这个问题，可以在子组件中使用计算属性来监听 prop 值的变化。计算属性会在每次 prop 值的变化时都重新计算一次，因此可以实现 prop 值的动态监听。 例如，假设父组件传递了一个名为 propValue 的 prop 值给子组件，子组件想要监听 propValue 的变化，可以使用如下代码： ``` <template> <div>{{ computedProp }}</div> </template> <script> export default { props: ['propValue'], computed: { computedProp: function () { // 返回要监听的 prop 值 return this.propValue } } } </script> ``` 这样，在父组件中修改 prop 值时，子组件就会重新计算 computedProp 的值，从而实现了对 prop 值的动态监听。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值