这个就类似于无限套娃,一层一层的,写个实例看的更清楚一些
首先不要忘了引入vue.js
// 创建student组件
const student = Vue.extend({
template:`
<div>
<h2>{
{studentName}}</h2>
<h2>{
{age}}</h2>
</div>`,
data(){
return{
studentName:'王二狗',
age:18
}
}
})
// 创建school组件
const school = Vue.extend({
template:`
<div>
<h2>{
{schoolName}}</h2>
<h2>{
{schoolMessage}}</h2>
<student></student>
</div>`,
// 组件化中data写成函数形式
data(){
return{
schoolName:'国务院',
schoolMessage:'合肥'
}
},
components:{
student
}
})
子文件得写在父文件的上方,否则会报错,而不显示在页面,然后我们在创建一个和school平级的hello组件
// 创建hello组件
const hello = Vue.extend({