首页 > 其他分享 >五、说一下vue父组件给了组件传值,子组件不更新的可能原因,怎么解决?

五、说一下vue父组件给了组件传值,子组件不更新的可能原因,怎么解决?

时间:2022-12-30 18:14:09浏览次数:40  
标签:vue computed 更新 parentData 组件 childData 传值 赋值

父组件传来的数据 parentData ,你在子组件又做了一个数据childData ,并且你只是进行了第一次的赋值(把parentData给了childData),父组件更新数据的时候,并没有对子组件的childData做额外的处理更新,子组件就不会做自动更新数据。

推荐: 子组件不要赋值直接把辅组件挂载在子组件上本身就是响应式,如果业务允许的情况下强烈推荐!!!!

1、在子组件中watch 去监听 parentData ,一旦改变就重新赋值childData为新的值

2、computed: 或者直接用childData写成computed属性, return组件的parentData。

3、组件重载:给调用子组件的地方加个key属性,parentData改变的时候,去修改这个key,触发childData的重新赋值(不太推荐)

标签:vue,computed,更新,parentData,组件,childData,传值,赋值
From: https://www.cnblogs.com/chen-cheng/p/17015518.html

相关文章

  • vue学习:chrome 中 vuetools 开发插件 的下载、安装
    文章目录​​一、下载​​​​二、安装​​​​三、加载到Google​​​​四、测试​​以前也做过,但老是忘记,这次吉林一下一、下载百度云地址双手奉上链接:https://pan.baidu......
  • 三、说说Vue组件间的传值? 并说说如何跨级传值??
    1、父组件传给子组件:子组件通过props属性接收数据2、子组件传给父组件:$emit()方法进行传递参数3、非父子组件之间的传值,兄弟组件间传值eventBus(中央时间总线),可以看......
  • vue3.0toRaw()、markRaw()、customRef()
    1.toRaw和markRaw的使用意义(给reactive对象进行的添加属性都会自动给该属性添加响应式,当需要给reactive添加没有响应式的属性则使用) 2. toRaw和markRaw的使用示例(对其......
  • vue中echarts图表自适应
    <template><divid="app"></div></template><script>exportdefault{data(){return{myCharts:null}},......
  • vue 中图片上传
    <template><div><h1>展示的内容:{{meg}}</h1><inputtype="text"v-model="inputValue"@keyup.enter="fn"/><hr/><imgwidth="200":src="img......
  • 自用对比vue2的vue3+vite 测试笔记
    目录基础对比研究子组件父组件scriptsetup极简父传子子传父父组件子组件基础对比研究子组件<scriptsetup>import{reactive,ref,computed,watch,watchEffect,o......
  • vue保留小数点后两位
    //保留小数点后两位,四舍五入numFilter(value){letrealVal=parseFloat(value).toFixed(2);returnrealVal;},//保留小数点后两位,不四舍五入numFilter(va......
  • vue3的shallowRef()和shallowReactive()
    1.shallowReactive():使用shallowReactive转化的对象只有对象的第一层级有响应式。   2.shallowRef():使用shallowRef转化的基本数据类型和使用ref没有差别,使用shallo......
  • Qt总结_对象模型_组件parent的理解
    标准C++对象模型在运行时效率方面卓有成效,但是在某些特定问题域下的静态特性就显得捉襟见肘。GUI界面需要同时具有运行时的效率以及更高级别的灵活性。为了解决这一问题,Q......
  • 【新闻推荐系统】(task4)Vue基础与实战(更新ing)
    学习总结文章目录​​学习总结​​​​二、Vue简介​​​​2.1安装​​​​2.1.1通过<script>标签引入​​​​2.1.2通过CDN安装​​​​2.1.3通过NPM安装​​​​2.2......