var Header = { template:‘模板‘ , data是一个函数,methods:功能,components:子组件们 }//局部声明
Vue.component(‘组件名‘,组件对象);//全局注册 等于注册加声明了
<!DOCTYPE html>
<html>
<head>
<title>组件化开发</title>
</head>
<body>
<div id="app">
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
var MyHeader={
template:`
<div>我是头部</div>
`,
}
var MyBody=Vue.extend({
template:`
<div>我是身体</div>
`
})
//这个是语法糖
// var MyBody={
// template:`
// <div>我是身体</div>
// `
// }
Vue.component(‘MyFooter‘,{
template:`
<div>我是尾部</div>
`
})
new Vue({
el:‘#app‘,
//注册组件
components:{
MyHeader,
MyBody
},
template:`
<div>
<my-header></my-header>
<my-body></my-body>
<my-footer></my-footer>
</div>
`,
data(){
return{}
},
})
</script>
</body>
</html>
原文：https://www.cnblogs.com/xl4ng/p/12579009.html