Vue Componentまとめ

vueのcomponent思想はUIコンポーネントを多重化し、機能の重複コードを減らすことができる.htmlとスタイルファイル、jsファイルをカプセル化することで、独立した機能を持つプラグインにします.ユーザーは、カスタムラベルでこのプラグインを呼び出すことができます.本文はcomponentの基本的な使い方を簡単に紹介し、開発過程における具体的な応用シーンと結びつけてさらに例を挙げて説明し、皆さんの理解を便利にします.
本文の開始:
カスタムコンポーネントを使用するには、まずコンポーネントを作成し、Vueの役割ドメインに登録する必要があります.その後、カスタムコンポーネントを使用することができます.

//component      
Vue.component('my-component', {

template:'
Hello vue component!
'

})

//      

newVue({

el:'#app'

})

登録後、htmlでカスタムcomponentを使用できます.

 
 
  ：       ， js html    。
        ：
 
 

  

    Hello vue component!
  

  
  は    のパッケージである.  componentを  するシナリオは、htmlテンプレートと  データをカプセル し、  して     なコンポーネントを  することである.たとえば、メニューバー、 プラグイン、ページングプラグインなどです.   なメニューバーで  します.このメニューコンポーネントは、 の  を たす  があります.
1、ユーザーはvue-menuのラベルを ってこのコンポーネント2を び すことができて、メニューの の  の  は  にレンダリングします
サブディレクトリを  にレンダリングする  がある  は、   がレンダリングデータを  する  があるため、propsを  して コンポーネントからサブコンポーネントへのメッセージ  を います.まず、 コンポーネントと コンポーネントの  を  します.componentでは、カスタムラベルを ラベルと び、カプセル されたhtmlを ラベルと びます. って,propsはパッケージされた  コンポーネントから  htmlへのデータの    を  するといえる.
コードを に  :
menu.vue



    export default{
        name:"vueMenu",
        props:["menu"],
    }

  
main.vue



    import vueMenu from "../../components/menu.vue"
    export default{
        name:"App",
        components: {
            vueMenu
        },
        data(){
            return{
                menu:[
                    {name:"    ",link:"sys"}
                    {name:"    ",link:"sys"}
                    {name:"    ",link:"sys"}
                ]
            }
        }
    }