vue3 控制el-dialog 双向绑定显示隐藏

父组件

<Contact v-model:isView="isView" />

 

子组件

 

<template>
	<div>
		<el-dialog
			width="400"
			title="微信二维码"
	  	:model-value="props.isView"
			@closed="handleClose"
		>
			<div class="dialog-div" >
				<img  src="/src/assets/img/weChat.png" class="dialog-img"/>
				<p>扫描点击联系我</p>
			</div>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup>
import {defineEmits, defineProps, watch} from 'vue';

const emit = defineEmits(['update:modelValue'])

const props = defineProps({
  isView: Boolean,//接收父组件ParentComponent传过来的数组
});

const handleClose = () => {
  // update:isView 只有个update:对应的变量 才能控制显隐
  emit('update:isView',false)
}

</script>

<style scoped lang="scss">

</style>

 

 

posted @ 2024-08-26 17:06  林财钦  阅读(75)  评论(0编辑  收藏  举报