el-dialog封装组件

最新推荐文章于 2025-04-29 18:30:36 发布

原创最新推荐文章于 2025-04-29 18:30:36 发布

· 266 阅读

1 ·

版权

文章标签：

#vue.js #前端 #javascript

本文介绍了如何在Vue应用中使用父子组件实现一个点击按钮显示和关闭弹窗的功能，涉及`el-button`和自定义`PlayVideo.vue`组件以及`el-dialog`的`visible.sync`属性的同步控制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

父页面

<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>