我们先声明两个组件对象
let a-component={
template:`
<h1> A组件 </h1>
`
}
let b-component={
template:`
<h1> B组件 </h1>
`
}
然后我们new 一个Vue实例
new Vue({
el:"#app",//绑定到id=app的元素上
components:{
a-component,
b-component
}
})
Vue.component()是用来注册全局组件的,而我们上面注册了两个局部(私有)组件,要想使用私有组件,就在new出来的实例中,使用components,加了个s,是个小细节
我们再使用
<div id="app">
<a-component />
<b-component />
</div>
这种没有问题,可以使用.这里还有个小tip,如果不用单标签,比如我上面用的这种,可以用双标签,如下
<b-component></b-component>
如果我们想在a中嵌套b组件,
let a-component={
template:`
<h1> A组件
<b-component />
</h1>
`,
}
上面的写法肯定不行,其实这么更改就可以了,将new出来的实例中,注册的b组件删掉,然后添加到a组件的对象中去
let a-component={
template:`
<h1> A组件
<b-component />
</h1>
`,
components:{
b-component
}
}
这样就可以嵌套了.还有一点需要注意:a,b组件的注册顺序,想在a中嵌套b,那么先声明b,然后声明a,最后new一个Vue的实例对象
~~完事儿~~