1.在本界面引用

<body>
<div id="app">
	<person></person>
</div>

<script> var Child = { template: '<h1>自定义组件!，这是一个人的定义</h1>' } // 创建根实例 new Vue({ el: '#app', components: { // <person>将只在父模板可用 'person': Child // 组件的名称<person> } }) </script>
</body>

2.引用另个一vue组件

在一个vue的项目中，我们有多个vue，每个页面的导航可能都是一样的，并且需要的代码比较多，那么我们就把它单独做一个vue组件
引入一个叫Test3的组件，然后import进来，取名为Test3,然后将它放入到components的底下注册，最后在template下，使用标签引用。

3.在html中引入

<a href="" @click.prevent="componentId='login'">登录</a>
            <a href="" @click.prevent="componentId='register'">注册</a>
            <a href="" @click.prevent="componentId='exit'">退出</a>
            <!-- component是一个占位符，:is属性，可以用来指定要展示的组件名称 -->
            <!--将呈现的页面的空间-->
            <component :is="componentId"></component>

这里面还包括组件之间的切换

Vue.component('login',{
            template:'<h3 style="">登录组件</h3>'
        })
        Vue.component('register',{
            template:'<h3>注册组件</h3>'
        })
        Vue.component('exit',{
            template:'<h3>退出</h3>'
        })