当前位置: 首页 > Web前端 > vue.js

Vue中父子组件通过props传递数据,父组件数据更新,子组件不动态更新的解决方法

时间:2023-04-01 00:42:26 vue.js

父组件:查看methods:{//查看单个接口信息lookInterfaceInfo(value){console.log(value,"lookInterfaceInfo");这个。标志=真;this.interFaceProps.modelSwitch=true;this.interFaceProps.id=value.id;},}子组件:exportdefault{name:"lookInterface",props:["interFaceProps"],components:{},data(){return{data:[],};},created(){},watch:{“interFaceProps.id”:function(newValue,oldValue){console.log(newValue,“newValue”);console.log(oldValue,"oldValue");if(newValue){consturl=`/api/interface-api/getApi?id=${newValue}`;this.$Ajax.get(url).then((e)=>{if(e.success){console.log(e.success);this.data.push(e.result);}});}else{if(this.interFaceProps.id){consturl=`/api/interface-api/getApi?id=${this.interFaceProps.id}`;this.$Ajax.get(url).then((e)=>{if(e.success){//console.log(e.success);this.data.push(e.result);}else{this.data=[];}});}}},},mounted(){console.log(this.interFaceProps.id,"this.interFaceProps.id");this.getInterFaceinfo();},getInterFaceinfo(){consturl=`/api/interface-api/getApi?id=${this.interFaceProps.id}`;this.$Ajax.get(url).then((e)=>{if(e.success){//console.log(e.success);this.data.push(e.result);}else{this.data=[];}});}、总结:通过监听子组件中的props,当id值发生变化时,首先启用挂载的方法,然后根据变化的props执行watch中的方法。