項目需求：點擊頁面的 品牌型號 按鈕，打開彈框，將 車架號碼 參數傳入接口獲取到對應的 品牌型號列表，在進行選擇后關閉彈框。

實際開發中，我在父組件里面引入了彈框子組件；詭異的事情發生了：
在小程序頁面有兩個問題1.已開始進入到父組件時候，就自動觸發了子組件彈框的created（）事件；2.但是在使用uni-app的彈框組件uni-popup-dialog時候，當點擊父組件打開彈框時候，子組件彈框是打開了，但此時既不觸發created（），也不觸發onLoad（）；
在H5瀏覽器頁面，點擊打開按鈕，是正常觸發created（），但是也不觸發onload（）；

此時我就不知道在小程序的什么位置寫打開彈框調用接口事件了；

H5解決方法：就是通過正常的created（）即可： 暫未書寫

小程序的解決辦法通過refs解決： 如下

1.父組件A代碼：
1.1打開彈框的按鈕和事件

<view v-if="!typeval" @click="changeCarnum" class="libox"><uni-icons type="arrowright" color="#ddd" /><text class="t1" v-if="formData.car_model_no">{{car_model_noInfo}}</text><text class="t2" v-else>請選擇</text></view> changeCarnum() {console.log('點擊打開');this.$refs.dialogCarnum.open()console.log(this.$refs);//打印發現當前頁的所有彈框console.log(this.$refs.dialogSonName);//自己的refconsole.log(this.$refs.dialogCarnum);/* #ifdef MP-WEIXIN */// 只兼容微信小程序的彈框觸發事件this.$refs.dialogSonName.first()//調用自己的接口方法/* #endif */},

1.2父組件A中引入的彈框代碼子組件（注意點：原來uni-app只會給uni-popup加ref，但是這里需要同時給引入的子組件加上自己的ref，既ref=“dialogSonName”）

<!-- 車輛型號彈框 --><uni-popup id="dialogCarnum" ref="dialogCarnum" type="dialog" @change="change"><mycarnum ref="dialogSonName" mode="input" :frame_no='formData.frame_no' :car_model_no="formData.car_model_no" :value="inputValue" @close="dialogCloseCarnum" @confirm="dialogInputConfirmCarnum"></mycarnum></uni-popup>

**2.自己的子組件B代碼：**引入了接口方法和uni-app彈框的popup.js文件，子組件內存在first（）方法，每次打開彈框都會觸發first（）；其實就相當于自己的created（）效果；如果想要做一些初始化就在first（）方法內調用既可以。

<template><view class="uni-popup-dialog"><view v-if="mode === 'base'" class="uni-dialog-content"><slot><text class="uni-dialog-content-text">{{content}}</text></slot></view><view v-else class="uni-dialog-content"><view class="allbox"><view class="top"><view @click="changeNum(1)" :class="{bgblue:indexNum == 1}" class="l">用車架號碼搜索</view><view @click="changeNum(2)" :class="{bgblue:indexNum == 2}" class="r">用品牌型號搜索</view></view><view class="bot"><view class="all"><uni-easyinput v-if="indexNum == 1" class="myinput" prefixIcon="search" v-model="searchval" :placeholder="placeholder1"></uni-easyinput><uni-easyinput v-if="indexNum == 2" class="myinput" prefixIcon="search" v-model="searchval2" :placeholder="placeholder1"></uni-easyinput><text class="sreachbtn" @click="scan">搜索</text></view><!-- <view class="searbox">搜索</view> --></view><scroll-view class="listbox" scroll-y="true"><view @click="selectInfo(item)" class="li" v-for="(item ,index) in listArr" :key="index">{{item.description}}</view></scroll-view></view></view><view v-if="point" class="uni-dialog-content-point"><view>提示：{{point}}</view></view><view class="uni-dialog-button-group"><view class="uni-dialog-button delbtn" @click="closeDialog"><uni-icons class="uni-dialog-button-text" type="close" size="25" color="#fff" /></view><!-- <view class="uni-dialog-button uni-border-left" @click="onOk"><text class="uni-dialog-button-text uni-button-color">保存</text></view> --></view></view> </template><script> import { etCarModelNoInfo } from "@/pages/api/add-car" import popup from '../../uni-popup/popup.js' /*** PopUp 彈出層-對話框樣式* @description 彈出層-對話框樣式* @tutorial https://ext.dcloud.net.cn/plugin?id=329* @property {String} value input 模式下的默認值* @property {String} placeholder input 模式下輸入提示* @property {String} type = [success|warning|info|error] 主題樣式* @value success 成功* @value warning 提示* @value info 消息* @value error 錯誤* @property {String} mode = [base|input] 模式、* @value base 基礎對話框* @value input 可輸入對話框* @property {String} content 對話框內容* @property {Boolean} beforeClose 是否攔截取消事件* @event {Function} confirm 點擊確認按鈕觸發* @event {Function} close 點擊取消按鈕觸發*/export default {name: "uniPopupDialog",mixins: [popup],props: {car_model_no: {type: [String, Number],default: ''},frame_no: {type: [String, Number],default: ''},value: {type: [String, Number],default: ''},placeholder: {type: [String, Number],default: '請輸入內容'},type: {type: String,default: 'error'},mode: {type: String,default: 'base'},title: {type: String,default: '提示'},point: {type: String,default: ''},content: {type: String,default: ''},beforeClose: {type: Boolean,default: false}},data() {return {searchval: '',searchval2: '',dialogType: 'error',focus: false,val: "",indexNum: 1,placeholder1: '輸入車架號',infObj: {},listArr: []}},watch: {// frame_no(val) {// console.log('車架號碼frame_no ', val);// },type(val) {this.dialogType = val},mode(val) {if (val === 'input') {this.dialogType = 'info'}},value(val) {this.val = val}},onLoad() {console.log('彈框的onloaa');uni.$on('eventfirst', this.first())// // 對話框遮罩不可點擊// this.popup.disableMask()// // this.popup.closeMask()// if (this.mode === 'input') {// this.dialogType = 'info'// this.val = this.value// } else {// this.dialogType = this.type// }// if (this.indexNum == 1) {// this.searchval = this.frame_no || ''// } else if (this.indexNum == 2) {// this.searchval2 = this.car_model_no || ''// }// this.getlist()},created() {console.log('彈框的created');// // 對話框遮罩不可點擊// this.popup.disableMask()// // this.popup.closeMask()// if (this.mode === 'input') {// this.dialogType = 'info'// this.val = this.value// } else {// this.dialogType = this.type// }// if (this.indexNum == 1) {// this.searchval = this.frame_no || ''// } else if (this.indexNum == 2) {// this.searchval2 = this.car_model_no || ''// }// this.getlist()},mounted() {this.focus = true},methods: {first() {console.log('父組件觸發子組件的first方法');// 對話框遮罩不可點擊this.popup.disableMask()// this.popup.closeMask()if (this.mode === 'input') {this.dialogType = 'info'this.val = this.value} else {this.dialogType = this.type}// if (this.indexNum == 1) {this.searchval = this.frame_no || ''// } else if (this.indexNum == 2) {this.searchval2 = this.car_model_no || ''// }this.getlist()},scan() {console.log('點擊搜搜');this.getlist()},confirm(e) {console.log(e.detail.value);},getlist() {let params = {}if (this.indexNum == 1) {params = {query_type: 'FRAME_NO',frame_no: this.searchval,}} else if (this.indexNum == 2) {params = {query_type: 'CAR_MODEL_NO',car_model_no: this.searchval2,}}etCarModelNoInfo(params).then(res => {this.listArr = res.dataif (res.return_code == '-1') {uni.showToast({title: res.return_message,duration: 1500,icon: 'none'});}})},changeNum(num) {this.indexNum = numif (num == 1) {this.placeholder1 = '輸入車架號'} else if (num == 2) {this.placeholder1 = '輸入品牌型號的部分英文和數字'}this.getlist()},iconClick(type) {uni.showToast({title: `點擊了${type === 'prefix' ? '左側' : '右側'}的圖標`,icon: 'none'})},selectInfo(item) {console.log(item);this.infObj = itemthis.onOk()},/*** 點擊確認按鈕*/onOk() {if (this.mode === 'input') {this.$emit('confirm', this.infObj)} else {this.$emit('confirm')}// 這個是真正的關閉彈框操作// if (this.beforeClose) return// this.popup.close()},/*** 點擊取消按鈕*/closeDialog() {this.$emit('close')if (this.beforeClose) returnthis.popup.close()},close() {this.popup.close()}} } </script><style lang="scss" scoped> .bgblue {height: 86rpx;color: #108ee9 !important;border-bottom: 2px solid #108ee9 !important;box-sizing: border-box !important; } .uni-popup-dialog {width: 300px;border-radius: 15px;background-color: #fff; }.uni-dialog-title {/* #ifndef APP-NVUE */display: flex;/* #endif */flex-direction: row;justify-content: center;padding-top: 15px;padding-bottom: 5px; }.uni-dialog-title-text {font-weight: 700;font-family: PingFangSC-Regular;font-size: 36rpx;color: #000 !important;letter-spacing: 0;text-align: center;line-height: 36rpx; }.uni-dialog-content {/* #ifndef APP-NVUE */display: flex;/* #endif */flex-direction: row;justify-content: center;align-items: center;padding: 5px 15px 15px 15px; }.uni-dialog-content-text {font-size: 14px;color: #6e6e6e; } .uni-dialog-content-point {color: #f86e21;padding: 0 15px 15px 15px;view {font-family: PingFangSC-Regular;font-size: 24rpx;color: #f86e21;letter-spacing: -0.58px;} }/deep/.uni-dialog-button-group {/* #ifndef APP-NVUE */display: flex;/* #endif */flex-direction: row;border-top-color: #f5f5f5;border-top-style: solid;border-top-width: 1px;border-top: none !important;position: relative !important; } // 自定義樣式 .delbtn {position: absolute !important;top: 50rpx !important;transform: translate(-50%, 0) !important;margin-left: 50% !important; } // 自定義樣式 .uni-border-left {border-left: none !important; }.uni-dialog-button {/* #ifndef APP-NVUE */display: flex;/* #endif */flex: 1;flex-direction: row;justify-content: center;align-items: center;height: 45px; }.uni-border-left {border-left-color: #f0f0f0;border-left-style: solid;border-left-width: 1px; }.uni-dialog-button-text {font-family: PingFangSC-Regular;font-size: 36rpx;color: #108ee9;letter-spacing: 0;text-align: center;line-height: 36rpx; }.uni-button-color {color: #007aff; }.uni-dialog-input {flex: 1;font-size: 14px;border-top: 1px #eee solid;height: 40px;padding: 0 10px;color: #555; }.uni-popup__success {color: #4cd964; }.uni-popup__warn {color: #f0ad4e; }.uni-popup__error {color: #dd524d; }.uni-popup__info {color: #909399; } // .uni-dialog-content {width: 100% !important;padding: 0 !important; } .allbox {width: 100% !important;height: 750rpx;.top {height: 84rpx;line-height: 84rpx;overflow: hidden;.l,.r {text-align: center;float: left;width: 50%;border-bottom: 1px solid #ddd;font-family: PingFangSC-Regular;font-size: 30rpx;color: #303030;}}.bot {padding: 30rpx;display: flex;.all {width: 100%;// /deep/.uni-navbar__header-btns-left {// display: none !important;// }/deep/.myinput {// flex: 1;width: 80%;display: inline-block;border-radius: 20px !important;}.sreachbtn {width: 15%;padding-left: 5%;display: inline-block;color: #108ee9;}}/deep/.uni-easyinput__content {border-radius: 20px !important;}.searbox {width: 70rpx;line-height: 70rpx;text-align: center;font-family: PingFangSC-Regular;font-size: 28rpx;color: #108ee9;}}.listbox {width: 100%;// padding: 0 30rpx!important;height: 500rpx;overflow: scroll;.li {font-family: PingFangSC-Regular;font-size: 28rpx;color: #212121;letter-spacing: 0;line-height: 40rpx;padding: 30rpx 30rpx;border-bottom: 1px solid #ccc;}}.input-view {/* #ifndef APP-PLUS-NVUE */display: flex;/* #endif */flex-direction: row;flex: 1;background-color: #f8f8f8;height: 30px;border-radius: 15px;padding: 0 15px;flex-wrap: nowrap;margin: 7px 0;line-height: 30px;}.input-uni-icon {line-height: 30px;}.nav-bar-input {height: 30px;line-height: 30px;/* #ifdef APP-PLUS-NVUE */width: 370rpx;/* #endif */padding: 0 5px;font-size: 14px;background-color: #f8f8f8;}.example-body {/* #ifndef APP-NVUE */display: block;/* #endif */padding: 0;} } </style>

總結

以上是生活随笔為你收集整理的记录uni-app弹框事件无生命周期问题；uni-popup-dialog打开触发事件；uni-popup-dialog调用接口时机的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。