uni+vue3+firstUI——component pop-up box uses v-model to bind parameters

illustrate

Encapsulate the frame pop-up component into a sub-component, reference the sub-component on the page, pass parameters and control the display and hiding of the pop-up box.

Subassembly

<template>
	<view>
		<wh-modal :show="showPopup" :descr="descr" maskClosable @click="onClick" :buttons="buttons"></wh-modal>
	</view>
</template>

<script>
	export default {
      
      
		props: {
      
      
			show: {
      
      
				type: Boolean,
				default: false
			}
		},
		data() {
      
      
			return {
      
      
				buttons: [{
      
      
					//按钮文本，必选
					text: '取消',
					//按钮文本颜色，可选
					color: '#fff',
					//按钮背景颜色，可选
					background: '#C5C5C5',
					//是否为镂空按钮，即背景色为透明，可选
					plain: false
				}, {
      
      
					//按钮文本，必选
					text: '去完善',
					//按钮文本颜色，可选
					color: '#fff',
					//按钮背景颜色，可选
					background: '#353834',
					//是否为镂空按钮，即背景色为透明，可选
					plain: false
				}],
				descr: '暂未完善信息',
				showPopup: false,
			}
		},
		watch: {
      
      
			show(val) {
      
      
				this.showPopup = val
			}
		},
		methods: {
      
      
			onClick(e) {
      
      
				// 关闭弹框
				this.showPopup = false
				this.$emit('update:show',this.showPopup) //更新
				// 去认证
				if (e.index == 1) {
      
      
					uni.$common.to('/pages/mine/register')
					return
				}
			}
		}
	}
</script>


<style lang="scss" scoped>

</style>

Parent page uses

<perfectPup v-model:show="showPup"></perfectPup>

import perfectPup from '@/components/perfectPup/perfectPup.vue'
const showPup = ref(false)
function toYuYueCar() {
    
    
	if (user.state.level == 'unregister') {
    
    
		showPup.value = true
		return
	}
}