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>

引用界面：

引用頁面，定義組件

頁面點擊調用方法

頁面引用組件標簽