el-dialog封装组件
父页面
<template>
<div>
<el-button type="primary" @click="visible = true">展示弹窗</el-button>
<!-- 弹窗组件 -->
<PlayVideo v-if="visible" :visible.sync='visible' />
</div>
</template>
<script>
import PlayVideo from './playVideo.vue'
export default {
data () {
return {
visible: false
}
},
components: {
PlayVideo
}
}
</script>
<style>
</style>子组件
<template>
<div>
<el-dialog class="dialog" :visible.sync="visible" title="标题" :before-close="handleClose">
22222
</el-dialog>
</div>
</template>
<script>
export default {
props: {
visible: {
default: false
}
},
methods: {
// 取消
handleClose () {
this.$emit('update:visible', false)
}
}
}
</script>
<style>
</style>原文地址：https://blog.csdn.net/qq_41588991/article/details/136480239
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！