zoukankan      html  css  js  c++  java
  • vue父子组件传参后,子组件重新初始化

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

     加载渲染过程

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

       子组件更新过程

    • beforeUpdate ---> 子beforeUpdate---> 子updated---> 父updated   

      父组件更新过程

    • beforeUpdate ---> 父updated

      销毁过程

    • beforeDestroy ---> 子beforeDestroy ---> 子destroyed---> 父destroyed

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

    在这里提供两种方法:

      1.设置子组件的ref属性,通过$refs.dszx.initData()来初始化子组件

    //设置ref属性
    <
    consultEdit :getMainID='rowID' ref="dszx"></consultEdit>
    //调用子组件初始化数据的方法
    this.$refs.dszx.initData()
    //初始化数据
            initData(){
                  //获取数据并重新赋值
            }

      2.使用父子组件间的通信,通过监听某个值的状态来决定是否初始化子组件  

    //父组件传参
    <consultEdit :getMainID='rowID'></consultEdit>
    //子组件接收参数,并监听此值变化,一旦变化则初始化数据
    props:["getMainID"],
    watch:{
            getMainID(newVal,oldVal){
                this.initData()
            }
    },
  • 相关阅读:
    扩欧(exgcd讲解)
    Django组件之forms
    Django组件之用户认证
    Django之中间件
    Django之cookie与session
    Django组件之分页器
    Django之Ajax
    Django之模型层2
    Django之模型层
    Django之模板层
  • 原文地址:https://www.cnblogs.com/miaomiaolong2/p/14138267.html
Copyright © 2011-2022 走看看