vue封装弹窗组件，供其它页面引用

写在前面：

　　最近开始使用vue写前段项目，从零开始一步一步自己摸索，博文作为学习记录，有哪写的不对的请指正。

正文：

　　页面弹窗内容多，或者弹窗可封装供多个界面使用，就使用以下方法封装组件。

弹窗页面代码：

<template>
  <div>
    <el-dialog title="检测项目" :visible.sync="modalShow" width="60%" :before-close="modalClose">
      弹窗内容
    </el-dialog>
  </div>

</template>

<script>
    export default {
        name: "index",
        data() {
            return {
                modalShow:false,
            }
        },
        methods:{
            init(){
                this.modalShow = true
            },
            modalClose(){
                this.modalShow = false;
            }
        },
    }

</script>

<style scoped>

</style>

引用界面：

引用页面，定义组件

页面点击调用方法

页面引用组件标签