vue pop package assembly for other pages referenced

EDITORIAL:

　　Vue recently started to write the preceding project, step by step from scratch their own way, Bowen as a learning record, is there any written wrong, please correct me.

text:

　　More content page pop, pop or more interfaces may be packaged for use, use the following method of packaging components.

Pop page code:

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

Interface references:

Reference page, custom components

Click on the page calls the method

Page references the component tag