父組件：?
? ? `<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= []; } }); },`
總結(jié)：
? ??通過在子組件監(jiān)聽props里面id值變化匿沛，最開始啟用mounted的方法扫责，后面根據(jù)變化的props執(zhí)行watch里面的方法。
