vue组件的调用方式

vue中一般都会把公共内容作为一个组件去布局，但是如何引用自定义的组件呢？下面就是vue调用自定义组件的方式，主要代码如下：

　　

<template>
        <div>
            <span>调用自定义的Dialog组件</span>
            <Dialog />
        </div>
 </template>
    <script>
        import Dialog from 'Dialog' //引入自定义组件
        export default {
            components: {//组件名
                Dialog //Dialog组件名
            },
            data() {
                return {
                    visible: false
                }
            },
            methods: {//方法
                openDialog() {
                    this.visible = true // 通过data显式控制dialog
                }
            },
            //钩子函数，mounted组件挂载完成
            mounted(){
                console.log('mounted组件挂载完成');
            },
        }
    </script>
　　<style scoped>

　　　　/*scoped 为局部样式*/

　　</style>