父组件:
`<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里面的方法。