vue父子组件传参后，子组件重新初始化

CircleMouse

于 2024-03-11 11:57:00 发布

阅读量463

点赞数 3

文章标签： vue.js javascript 前端 ecmascript 前端框架

本文链接：https://blog.csdn.net/sinat_27956747/article/details/137285954

版权

首先回顾一下父子组件生命周期的执行顺序：

加载渲染过程：

父beforeCreate ---> 父created ---> 父beforeMount ---> 子beforeCreate ---> 子created ---> 子beforeMount ---> 子mounted ---> 父mounted

子组件更新过程：

父组件更新过程：

销毁过程：

在父组件中点击某条数据显示子组件详情时，由于父组件dom已经挂载完成,子组件dom也完成挂载渲染，所以不会重新渲染刷新。因此在点击详情传入参数后，需要重新初始化子组件

第一种：设置子组件的ref属性，通过$refs.dszx.initData()来初始化子组件

//设置ref属性
<consultEdit :getMainID='rowID' ref="dszx"></consultEdit>

//调用子组件初始化数据的方法
this.$refs.dszx.initData()

//初始化数据
initData(){
   //获取数据并重新赋值
}

第二种：使用父子组件间的通信，通过监听某个值的状态来决定是否初始化子组件

//父组件传参
<consultEdit :getMainID='rowID'></consultEdit>

//子组件接收参数，并监听此值变化，一旦变化则初始化数据
props:["getMainID"],
watch:{
        getMainID(newVal,oldVal){
            this.initData()
        }
},

关注