1.el只能在用new的时候使用!!如果使用对象来创建组件,那么就不能使用el!也就是说组件定义式不能写el配置项,因为最终所有组件最终都由一个vm管理
但是vm里面可以写成对象,因为vm只有一个,但是子组件可能使用很多次所以只能写成函数式
2.我们的data必须写成函数式,不能 写成对象式
原因
这个位置我们的x1和x2指向的是同一个东西,当我们修改x1的 时候我们的x2也会跟着修改,但是如果我们写成函数式就能避免这个问题:
3.使用组件三步骤
1.extend创建组件
<script>
const school=Vue.extend({
template:`
<div>
<h2>n1的值:{{n1}}</h2>
<h2>n2的值:{{n2}}</h2>
</div>
`,
data(){
return{
n1:"xppp",
n2:"sddd"
}
}
})
const stude=Vue.extend({
template:`
<div>
<h2>n3的值:{{n3}}</h2>
<h2>n4的值:{{n4}}</h2>
</div>
`,
data(){
return{
n3:"pppx",
n4:"eeeex"
}
}
})
</script>
2.注册组件,使用components
局部注册
new Vue({
el:"#root1",
components:{
xuexiao:school,
xuesheng:stude
}
})
若我们组件名和注册的时候同名,那么我们可以简写成这样:
全局注册:靠Vue.component( ‘组件名’,组件)
是 component,没有加s。
3.使用:
<div id="root1">
<xuexiao></xuexiao>
<xuesheng></xuesheng>
</div>