Vue2.0—Vue与Component的关系
Posted wx62bdb159cc187
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>
以上是关于Vue2.0—Vue与Component的关系的主要内容，如果未能解决你的问题，请参考以下文章