组件是可复用的 Vue 实例，且带有一个名字
我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用：
- data必须是函数
- 没有el属性
<div id="app">
<!--组件应用-->
<zujianming></zujianming>
</div>
<script>
// 创建组件
Vue.component(‘zujianming‘,{
template:`
<h1>{{huanying}}</h1>
`,
data(){
return{
huanying:‘hello vue‘
}
}
});
// 创建根实例
new Vue({
el:‘#app‘
})
</script>
components:{}
<style> .box{ width: 50px; height: 50px; background-color: #5cb85c; } </style> <div id="app"> <!--组件应用--> </div> <script> // 创建组件 let Header = { template:` <div class="box"> <h1>{{ huanying }}</h1> </div> `, data(){ return{ huanying:"hello vue" } } } let App = { template:` <Header></Header> `, components:{ ‘Header‘:Header, } }; // 注册组件 new Vue({ el:‘#app‘, template:‘<App></App>‘, components:{ App, } }) </script>
原文：https://www.cnblogs.com/niuli1987/p/9931527.html