
父页面
<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>











![javaEE基于springboot民宿推荐系统springmvc+mybatis+jsp]](https://img-blog.csdnimg.cn/direct/b973e23ea2eb4bc1894e2ed6ef429531.jpeg)






