【Vue2.0】—Vue与VueComponent的关系（十二）
<body>
<div id="root">
<h2>{{name}}</h2>
</div>
<script>
Vue.config.productionTip = false;
//第一步：创建组件
//创建一个名叫小王的组件
const wang = Vue.extend({
template: `
<div>
<h2>你好，我叫{{myname}}</h2>
</div>
`,
data() {
return {
myname: '王同学'
}
}
})
//创建school组件
//el:'#root'
//组件定义时 一定不要写el配置项，因为最终所有的组件都要被一个vm管理 由vm决定服务于哪个容器
const school = Vue.extend({
template: `
<div>
<h2>学校名称：{{schoolName}}</h2>
<h2>学校地址：{{address}}</h2>
<wang></wang>
</div>
`,
data() {
return {
schoolName: '二中',
address: '北京',
}
},
components: {
wang
}
})
//创建一个hello组件
const hello = Vue.extend({
template: `
<div><h2>{{msg}}</h2></div>
`,
data() {
return {
msg: '欢迎来到北京学习！'
}
}
})
//定义一个app组件
const app = Vue.extend({
template: `
<div>
<school></school>
<hello></hello>
</div>
`,
components: {
school,
hello
}
})
//第二步：注册组件(局部注册)
new Vue({
el: '#root',
template: `<app></app>`,
components: {
app
}
})
</script>
</body>