Vue2.0—Vue与Component的关系 _vue2.0

黄沙百战穿金甲，不破楼兰终不还。这篇文章主要讲述Vue2.0—Vue与Component的关系相关的知识，希望能为你提供帮助。
【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>