el-tab mounted只有第一次能取到prop中的值 mounted和props先后顺序

最新推荐文章于 2023-03-29 17:34:12 发布
最新推荐文章于 2023-03-29 17:34:12 发布
阅读量466 收藏
点赞数
分类专栏： vue elemnetUI 文章标签： 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SanOrintea/article/details/124924092
版权

一个Tab，分页的代码用组件实现，一个组件是一页。在这个组件中进行http请求。入参取prop传进的。第一次点入这个currentPage能正常传，第二次就不行。
解决方法：
方法1：不应该在mounted中取prop值。应该吧要写在mounted中的东西写在prop值变化监控的watch中
方法2：在mounted中加settimeout0延迟

SanOrintea
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
解决vue2 在mounted函数无法获取prop中的变量问题
10-17
在Vue2中，prop是用来传递父组件的数据到子组件的一种机制。然而，有时开发者可能会遇到在`mounted`生命周期钩子中无法获取到prop中的变量的问题。这个问题通常发生在尝试访问prop数据时，数据尚未完全初始化或者...
vue中子组件的methods中获取到props中的值方法
10-18
在Vue.js中，父子组件之间的...如果`prop`的值是异步获取的，可以通过在子组件中创建一个`watch`来监听变化，并在变化发生时执行相应逻辑。这样可以确保即使在数据延迟加载的情况下，子组件也能正确响应父组件的更新。
html的tab只显示第一个,tab切换+下拉刷新+只有第一个tab有效，第二个tab下拉刷新出来的内容跑到第一个去了 怎么解决 求解答...
weixin_36094492的博客
07-15 390
.mui-table-view li {overflow: hidden;margin: 1.25rem 3% 0;border-radius: 0.21rem;background-color: #FFFFFF;}.i-da {background: url(../img/zhifu.png) no-repeat;background-position: right 6% bottom 2.25...
解决el-tabs切换tab页，只有第一个tab页曲线图正常显示，其它tab页曲线图不显示问题
zheng_chang_wei的博客
08-24 1082
el-tab-pane 添加 lazy="true" 即可
关于 props、methods、data、computed的执行顺序
Bald_monster的博客
12-22 1279
关于 props、methods、data、computed的执行顺序 综上所述：props —》methods —》data —》computed —》watch。 详情请看源码解析：https://github.com/vuejs/vue/blob/dev/src/core/instance/state.js#L48-L62
vue 父子组件mounted执行顺序
liulang1905的博客
05-25 5380
先看一下父子组件的 mounted created 等一些钩子函数的先后顺序 1 父组件：beforeCreate 2 父组件：created 3 父组件：beforeMount 4 子组件：beforeCreate 5 子组件：createc 6 子组件：beforeMount 7 子组件：mounted 8 父组件：mounted 目前需求是要在父组件先个data 里的属性赋值，后传给子组件， 所以就可以按照顺序写方法了，核心就是：按照钩子顺序来先赋值后传即可 ...
【vue2】父子组件通信之props/$emit、兄弟组件、父子组件生命周期执行顺序
qq_40605334的博客
04-21 1015
父向子传值 //父组件中内容 app.vue <MyList/ :list="list"> data(){ list:[] } //子组件中 list.vue <li v-for="item in list" :key="item.id"></li> props:{ lsit: Array } 子向父 子组件内容 <input type="text" v-model="title"> <button @click="a
解决vue props 拿不到值的问题
10-18
然而，在实际开发过程中，有时可能会遇到`props`无法正确获取到值的问题，这通常由多种原因引起。本文将针对这个问题提供两种解决方案，并深入探讨`props`的使用规范以及如何避免此类问题。 ### 方案一：使用`v-if`...
Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案
08-31
在 Vue2.0 中，默认情况下 props 只能从父级传递到子级，无法实现双向绑定。这种设计的初衷是为了避免双向绑定可能引发的数据混乱问题。然而，在实际项目中，我们经常需要在组件之间实现数据的同步和交互。为解决这...
关于vue+element的table表格prop获取数据是数组的问题
weixin_45237107的博客
12-12 2657
vue+element表格渲染数组数据
父组件异步获取数据传给子组件获取不到
鲸落
03-09 1256
最近封装了个echarts图表的子组件,发现父组件中数据从接口获取后，传递给子组件时，在子组件的created函数中取不到，代码是这样的 父组件： <el-tabs v-model="attributeName"> <el-tab-pane label="用户数量" name="first"> <Charts v-if="attributeName === 'first'" :barData="bardatas.count" type="bar" /.
el-table不显示数据的问题
wwwjr00的博客
03-29 5401
一种是在webpack里面设置一下：vue: 'vue/dist/vue.esm.js',原因是说element-ui使用的Vue版本与当前的Vue版本不一致导致的。此提示信息表明强烈不推荐使用core-js@
Element-UI vue2使用el-table数据不显示解决方案
weixin_51641169的博客
07-27 1万+
Element-UI vue2使用el-table数据不显示解决方案
vue学习篇--created mounted有时候拿不到props值问题
ChenLingZhi1115的博客
11-18 1787
created mounted拿不到props值问题 子组件动态获取父组件传来的值时，因为props原理是通过ajax请求回来的。 请求的这个过程是需要时间，但是子组件的渲染要快于ajax请求过程，所以此时 created 、 mounted 这样的只会执行一次的生命周期钩子已经执行了，但是 props 还没有流进来（子组件），所以只能拿到默认值。 解决方法：需要对props的值进行监听，然后获取新值： props:{ selectData:{ type:Array }
vue2.0父子组件的生命周期先后顺序
峰会路转的博客
10-29 402
今天在做iview项目的时候，子组件的的初始化数据必须从父组件的初始化数据里取到数据后发请求 执行顺序如下： 父组件 created 子组件 created 子组件 mounted 父组件 mounted 如果有多个子组件： 父组件created钩子结束后，依次执行子组件的created钩子 多个子组件的created执行顺序为父组件内子组件DOM顺序 多个子组件的mounted顺序无法保证，跟子组件本身复杂程度有关 父组件一定在所有子组件结束mounted钩子之后，才会进入mounted
vue-props给data赋值仅第一次有效问题
weixin_45441173的博客
11-01 1954
vue-props给data赋值仅第一次有效问题
VUE中父子组件中的生命周期先后顺序
qq_44490656的博客
08-03 638
VUE中父子组件中的生命周期先后顺序
vue生命周期以及顺序
热门推荐
Java领域优质创作者，华为云享专家
10-28 1万+
vue的生命周期以及响应的顺序
vue 在组件中使用$nextTick以及mounted中接收不到props的解决方法
weixin_46824709的博客
07-26 2152
在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的DOM。//修改数据//DOM还没有更新//DOM更新了})
elementplus的el-table获取表头prop的值
最新发布
04-25
您可以使用`ref`属性获取到`el-table`组件实例，进而通过`$refs`来操作表格。然后通过`this.$refs.table.columns`获取到所有的表头信息，其中`prop`属性就是对应的表头属性。可以参考如下代码： ``` <template> <el-table :data="tableData" ref="table"> <el-table-column prop="id" label="ID"></el-table-column> <el-table-column prop="name" label="Name"></el-table-column> <el-table-column prop="age" label="Age"></el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [ { id: 1, name: 'Tom', age: 20 }, { id: 2, name: 'Jerry', age: 18 }, { id: 3, name: 'Mike', age: 25 }, ], }; }, mounted() { const columns = this.$refs.table.columns; const props = columns.map((item) => { return item.property; }); console.log(props); // ["id", "name", "age"] }, }; </script> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值