使用props传值时无法在mounted处理的解决方案
更新时间：2022年04月23日 09:40:25 作者：袁丢丢
这篇文章主要介绍了使用props传值时无法在mounted处理的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
props传值无法在mounted处理的解决
遇到的问题
父组件传值，在子组件中不能用mounted处理
export default{
props:['floor1'],
data(){
return {
floor1_0:'',
floor1_1:'',
floor1_2:'',
}
},
mounted(){
console.log(this.floor1) //打印出的不是所传的值
this.floor1_0 = this.floor1[0];
}
}因为props为异步传值（就是在父组件没有加载完数据时，floor1就传递到了子组件，此时floor1还没被附上值，先执行了子组件的mounted），而mounted执行一次后无法改变floor1的值。
解决
使用侦听器watch，当floor1改变时，重新计算
watch:{
floor1:function(val){
this.floor1_0 = val[0];
this.floor1_1 = val[1];
}
}vue笔记（props和mounted）
1.mounted
1.1mounted中使用$nextTick会导致页面挂掉
mounted() {
// 页面卡死
this.$nextTick(() => {
this.setUrl()
})
}2.props
2.1props传过去的值，第一时间在mounted是获取不到的。因为是异步传值的。
解决方法：
（1）使用watch
（2）将需要进行的处理在父组件进行操作，然后将操作完的值直接传给子组件。
watch: {
datas: function (val) {
}
}
或
(父)
<examAchSearchHeader :exprotUrl="exprotUrl"></examAchSearchHeader>
...
this.exportUrl = XXXX
(子)
props: {
exportUrl: String
}2.2通过props传给子组件的值变化后子组件接收到 和 通过refs访问子组件方法中使用接收到的参数变化的顺序问题
通过refs访问时，接收到的参数是变化前的参数。还是因为异步的问题。可以强制赋值改变，或用watch等。
// parent
<examAchTable ref="achTable" :dataList="examAchList"></examAchTable>
// 若这里不强制赋值一下，在examAchList变化后直接调用子组件的transData方法时，子组件dataList仍是变化前的值
this.$refs.achTable.dataList = this.examAchList
this.$refs.achTable.transData(res.data.totalRecord)
// child
transData(total) {
if (this.dataList)
// ...
}以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章我们将探讨Vue3框架的优秀特性、使用原理、周边生态和实战应用，系统的学习Vue生态体系，希望和大家共同成长，我们一起探讨下Vue3和Vue2的响应式原理，那究竟什么是“响应式”，接下来跟着小编一起来学习吧2023-05-05
这篇文章主要为大家详细介绍了Vue3和Vite的那些事，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2022-02-02
这篇文章主要给大家介绍了关于vue导出报表至excel表格的三种方式,导出报表是实际开发的常见功能,前后端都可以实现表格导出,本文介绍的是用vue实现,需要的朋友可以参考下2023-09-09
这篇文章主要介绍了如何在vue中使用ant-design-vue组件,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-01-01
本文主要还是针对 Vue.js 2.x 版本，毕竟接下来一段时间，Vue.js 2.x 还是我们工作中的主流版本，对vue.js性能优化技巧相关知识感兴趣的朋友一起看看吧2021-09-09
Vue中关闭当前页面的方法与原生JavaScript类似,都是通过window对象的close方法实现,这篇文章主要介绍了Vue关闭当前页面的方法,需要的朋友可以参考下2023-09-09
在 Vue 3 中,如果你使用 reactive 来定义一个响应式对象,那么这个对象的属性是不能被重新赋值的,因为 reactive 会将对象的属性转换为 getter/setter,这样 Vue 才能追踪到属性的变化,这篇文章主要介绍了vue3 中使用 reactive 的问题,需要的朋友可以参考下2024-03-03
这篇文章主要介绍了Nuxt的动态路由和参数校验操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
这篇文章主要介绍了koa2+vue实现登陆及登录状态判断，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下2019-08-08
这篇文章主要介绍了vue中get请求如何传递数组参数的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-11-11
最新评论