Vue私有组件注册的问题(组件中嵌套组件)

我们先声明两个组件对象

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的实例对象

~~完事儿~~