vue 父组件传子组件数值，父值变更子获取的值没有变的问题

最新推荐文章于 2024-03-28 17:29:36 发布
最新推荐文章于 2024-03-28 17:29:36 发布
阅读量3.6k 收藏 2
点赞数 2
分类专栏： 日常问题总结 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gua222/article/details/107035644
版权

1.父组件给子组件传值，子组件使用props接收值。

//父组件页面
<div>
<TransChart :start-time="startTime" :end-time="endTime"/>
</div>

//子组件页面
props: ['startTime', 'endTime'],

问题：父组件页面在变更startTime和endTime时，子组件的值不会随之改变。
解决办法：在子组件内使用 watch 检测数据变动

watch: {
    endTime: function() {
      this.initData()
    }
  },
Endless Daydream233
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 父组件数据更新后子组件不变_vue知识汇总-2
weixin_39651488的博客
11-21 5998
一、对于MVVM的理解？MVVM 是 Model-View-ViewModel 的缩写。Model代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑。View 代表UI 组件，它负责将数据模型转化成UI 展现出来。ViewModel 监听模型数据的改变和控制视图行为、处理用户交互，简单理解就是一个同步View 和 Model的对象，连接Model和View。在MVVM架构下，View ...
vue-slider
03-19
2. **基本使用**：在Vue组件内，可以使用`<vue-slider>`标签创建滑块，如`<vue-slider v-model="value"></vue-slider>`，这里的`v-model`绑定的是滑块的值。滑块的默认行为是双向滑动，允许用户选择一个范围值。 3....
父组件给子组件传值，子组件数据不更新，什么问题，怎么解决
最新发布
weixin_38662465的博客
03-28 3422
2、可以给子组件动态绑定唯一标识key，如果数据发生变化时，同时更改下key值，这样就会重新渲染下子组件。1、利用watch监听数据的方式，如果数据发生变化，调用视图渲染方法。1、父组件没有把值传过去，子组件没有获取到最新的值。2、子组件接收到最新的值，但是没有实时渲染到视图上。
父子组件传值——父组件传值发生变化，子组件的数据没有发生变化
qq_37037988的博客
07-21 2830
Vue-父子组件传值
Vue父子组件传值，父组件通过props传值给子组件，子组件触发父组件数据更新，子组件未更新(例：展开收缩操作)
weixin_46392266的博客
02-22 3479
Vue父子组件传值，父组件通过props传值给子组件，子组件触发父组件数据更新，子组件未更新 一、需求： 父组件：是一个数据列表页，需要在获取到列表数据后，将数值传递给子组件—展示。 子组件：修改对象或数组中的键，对渲染的列表的每一项(item) 的文本内容(item.content)进行展开收缩操作。 二、编写代码： 父组件： <div> //父组件调用子组件 childlist:后台返回的数据列表 绑定ref <Datalist ref="child" :childlist="
解决vue3.0父传给子的值不随父组件改变而改变
星星月亮的博客
03-23 1万+
最近自己在学习vue3.0-studying，虽然啥也不是，但是该学的还得学。。。 再练习一个父子传值的案例是遇到了一个问题。就是父组件传给子组件的值，父组件改变的时候而子组件不改变。 原因：子组件中的setup函数只能执行一次，所以组件中的值更新时，子组件就不听话了。。。 解决方法:使用了vue3.0里的watchEffect方法 父传子 1.父组件 父组件:引入子组件，并且把值传给子组件 <template> <input type="text" v-model="msg"&g
解决vue项目获取dom元素宽高总是不准确问题
10-15
另外，如果你需要包含单位（如像素`px`）的数值，可以使用`window.getComputedStyle`来获取样式计算后的值： ```javascript const computedHeight = window.getComputedStyle(this.$refs.myDiv).height; const ...
【JavaScript源代码】VUE watch监听器的基本使用方法详解.docx
12-29
总的来说，Vue.js 的`watch`监听器为我们提供了强大而灵活的数据变更响应机制，通过`handler`、`immediate`和`deep`等选项，我们可以根据需求定制数据变化时的行为，实现复杂的功能逻辑。在实际项目中，`watch`通常...
毕业设计—中医藏象辨证量化诊断系统.zip
12-31
《中医藏象辨证量化诊断系统》是一款基于Python、Java和Vue技术栈的毕业设计项目，旨在通过现代信息技术实现中医理论中的藏象辨证过程的量化与自动化。这个系统不仅适用于毕业设计和课程设计，也提供了丰富的学习...
Vuex项目实测(二）
03-23
组件中通过 `this.$store.commit('increment')` 提交 mutation 增加计数，通过 `this.$store.getters.counter` 获取当前计数值。 六、最佳实践 1. **明确职责**：保持 mutations 简单，只做最小程度的数据更新；...
vue父组件传子组件数值，子组件值没有变
hua_ban_yu的博客
08-06 3929
在使用vue开发项目时遇到一个这样的问题，由于项目多成封装，数据是从祖父组件传给孙子组件，中间隔了一个父组件，由于孙子组件不能直接修改值，所以定义了一个变量，从而导致祖父组件更新内容后，孙子组件内容没有发生变化。如图 解决方法：在孙子组件中watch监听input输入变更的值 祖父组件 <search-choose :filterObj="secondFilterArr[i]" v-if="secondFilterArr.length&g...
Vue父组件传给子组件数据,子组件得不到数据解决方法
m0_49714202的博客
07-21 1万+
Vue父组件传给子组件数据,子组件得不到数据解决方法
Vue父组件修改了通过 props传递给子组件的数据，子组件没有及时更新
Alice_hhu的博客
04-26 1万+
<!-- 父组件 --> <template> <div> <my-component ref="myComponent" :id="curId" /> </div> </template> <script> export default { data(){ return { ...
[Vue] 父组件明明按照正确的绑定方式更新了传递给子组件的prop属性 子组件却没有及时更新。解决方案：key值 nextTick watch监听。
一起来看烟花吧的博客
07-20 4704
prop介绍 prop是单向数据流，父组件传递给子组件的数据发生改变，而子组件的页面中引用了该prop，那么按理说子组件会重新渲染，将最新的prop渲染到页面上。 能正常更新的案例 在父组件中启动定时器，每隔1s对状态数据parentNum进行加一操作。父组件中引用子组件时将parentNum作为属性传入。 下面的例子实现的效果是子组件每隔一秒都会更新。从0开始每隔一秒加1并更新在页面上。 <!--父组件--> <template> <div class="parentC
uni-app vue3+ts 父组件向子组件传值，子组件不更新值
月落星河
08-17 5491
vue3父子组件传值不更新
vue父组件数据更新，子组件没有变化。
热门推荐
这个博客记录我的成长。(专注前端开发，ehcarts图表开发，接定制)，有需要请站内私信。
09-23 2万+
vue父组件数据更新，子组件没有变化。 在父子组件传参时，父组件将值传到子组件后，子组件进行数据展示，在第一次传参时可以正常显示，过一段时间后重新赋值，则发现子组件里面数据没有更新，这个时候需要在子组件中加入watch 进行数据监听 示例 父组件 <div :parenData ="datas"></div> <script> data(){...
父组件props值改变，子组件未更新
qq_41194539的博客
05-26 1455
是子组件props对象不是ref对象，无法根据父组件变化而更新视图。
vue父子组件传值，父组件内容更新子组件内容不实时更新
G佳伟
09-05 1万+
vue父子组件传值不能实时更新问题，父组件将值传给了子组件，但子组件显示的值还是原来的初始值，并没有实时更新
vue 父组件传子组件是对象和值
09-11
Vue 父组件传递给子组件的可以是对象或者值。下面是两种常见的传递方式： 1. 通过属性绑定传递值： 父组件可以通过在子组件上绑定属性来传递值。例如，父组件中的数据可以通过属性绑定传递给子组件： ```html <template> <div> <child-component :data="obj"></child-component> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, data() { return { obj: { name: 'John', age: 25 } }; } }; </script> ``` 在子组件中，可以通过 `props` 接收父组件传递的值： ```html <template> <div> <p>Name: {{ data.name }}</p> <p>Age: {{ data.age }}</p> </div> </template> <script> export default { props: { data: Object } }; </script> ``` 2. 通过插槽传递内容： 父组件可以通过插槽来传递包含任意内容的子组件。例如，父组件可以在子组件的标签内放置其他 HTML 或组件，并将其作为插槽内容传递给子组件： ```html <template> <div> <child-component> <h1>{{ title }}</h1> <p>{{ content }}</p> </child-component> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, data() { return { title: 'Welcome', content: 'This is the content' }; } }; </script> ``` 在子组件中，可以通过 `slot` 来获取插槽内容： ```html <template> <div> <slot></slot> </div> </template> ``` 这样，子组件就可以渲染父组件传递的内容了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值