コンポーネントの概念

コンポーネントシステムはVue.js重要な概念の1つです。これは、独立した再利用可能な小さなコンポーネントを使用して大きなアプリケーションを構築できるようにする抽象化を提供します。あらゆる種類のアプリケーションインターフェイスをコンポーネントツリーに抽象化できます。
ここに画像の説明を挿入
各コンポーネントはコンポーネントは互いに独立して、使用する前に作成および登録する必要があります。登録は、グローバル登録とローカル登録に分かれています。

グローバル登録

文法

Vue.component('component-name', { 
	/* ... */ 
})

用いたVue.component()方方法を、2つのパラメータが渡されることができ、最初のパラメータは、指定された（ケバブケース）コンポーネント名が推奨されています。

例

<div id="app">
    <component-name></component-name> <!-- 以标签形式使用组件 -->
</div>

<script>
    // 定义一个名为 component-name 的新组件
    Vue.component('component-name', {
        //组件内容写这里
        template: "<div>这是一个全局组件</div>",
    })
    
    //声明一个vue实例
    var vueApp = new Vue({
        el: '#app',
    })
</script>

注意が必要な事項

グローバルコンポーネントは、ルート要素の下で有効になる前に、Vueインスタンスが作成される前に書き込む必要があります
テンプレートの最初のレベルには、1つのラベルのみを含めることができます。
コンポーネントdataは関数でなければなりません
タグはネストされますHTMLような制限のルールを、：、<ul>、、<ol> 要素を制限することでラップすることができ、などいくつかの要素がこれだけ他のいくつかの内部素子に表示されます<table><select><option>

部分登録

文法

var child={
  template:"<h1>我是局部组件</h1>"
};

new Vue({
  el: "#app1",
  components:{
    "child-component": child
  }
});

使用Vue例オプションがありcomponents、登録が唯一のインスタンスのスコープで有効になった後、地元のアセンブリを登録

例

<div id="app">
  <child-component></child-component>
</div>

var child = {
   template:"<button @click='add'>我是局部组件:{{m}}</button>",
   data:function(){
     return {m:1}
   },
   methods:{
     add:function(){
       this.m++
     }
   }
 };
 
 new Vue({
   el: "#app",
   components:{
     "child-component": child
   }
 })

注意が必要な事項

ローカルコンポーネントは、呼び出し元の親コンポーネントに登録され、このスコープでのみ使用できます
グローバルコンポーネントとローカルコンポーネント、データも関数である必要があります
タグはネストされますHTMLような制限のルールを、：、<ul>、、<ol> 要素を制限することでラップすることができ、などいくつかの要素がこれだけ他のいくつかの内部素子に表示されます<table><select><option>