我們先宣告兩個元件物件

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的例項物件

~~完事兒~~