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

父组件: 

    `<a-button type="primary" @click="lookInterfaceInfo(record)" >查看</a-button ><!-- 查看接口信息弹框 --> <look-interface v-if="flag" :interFaceProps="interFaceProps" > </look-interface>`

`methods: {//查看单个接口信息lookInterfaceInfo(value) { console.log(value,"lookInterfaceInfo");this.flag =true;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值变化,最开始启用mounted的方法,后面根据变化的props执行watch里面的方法。



最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。