ホームページ > 記事 > ウェブフロントエンド > vue.js コンポーネントのグローバル登録とローカル登録の簡単な紹介と分析例

vue.js コンポーネントのグローバル登録とローカル登録の簡単な紹介と分析例

不言オリジナル: 2018-08-11 16:15:531783ブラウズ

この記事では、vue.js コンポーネントのグローバル登録とローカル登録の簡単な紹介と分析例を紹介します。必要な方は参考にしていただければ幸いです。

1. グローバル登録インスタンス (以下は公式 Web サイトの例によるコードです)

  <div id="app">
     <com-btn></com-btn>
     <com-btn></com-btn>
 </div>

<script>
        Vue.component(&#39;com-btn&#39;,{
            data:function(){
                return{
                    num:0,
                }
            },
            template:`<button v-on:click=&#39;change&#39;>点我{{num}}次</button>`,
            methods:{
                change:function(){
                    this.num += 1;
                }
            }
        })
       var vm = new Vue({
           el:&#39;#app&#39;,
           data:{

           },
           
       })
    </script>

コンポーネントを登録するときは、com-btn などの名前を付ける必要があることがわかります。コンポーネント名

Vue.component(&#39;my-component-name&#39;, { /* ... */ })

これは、登録したコンポーネント com-btn の最初のパラメーターです。このコンポーネントはグローバルに登録され、新しく作成された Vue ルートインスタンス (新しい Vue) で使用できます。

有効にするには、すべてのコンポーネントをルートインスタンスの前に記述する必要があることに注意してください。

2 ローカル祖先ブックの例

<script>
        var childcom ={
            data:function(){
                return{
                    num:0,
                }
            },
            template:`<button v-on:click=&#39;change&#39;>点我{{num}}次</button>`,
            methods:{
                change:function(){
                    this.num += 1;
                }
            }
        }
       var vm = new Vue({
           el:&#39;#app&#39;,
           data:{

           },
           components:{
               &#39;com-btn&#39;:childcom,//调用这个组件
           }
       })
    </script>

ローカル登録の利点は、webpack のようなビルドシステムを使用している場合です。グローバル登録でコンポーネントを登録すると、特定のコンポーネントを使用しない場合、最終的なビルド結果にそのコンポーネントが残り、不要な JS ダウンロードが増加します。

そのため、単純な JS オブジェクトを通じてコンポーネントを登録できます

var ComponentA = { /* ... */ }

このコンポーネントを使用する必要がある場合、ルートインスタンスでこの定義されたコンポーネントを呼び出すだけで済みます。

new Vue({
  el: &#39;#app&#39;
  components: {
    &#39;component-a&#39;: ComponentA,
    &#39;component-b&#39;: ComponentB
  }
})

ルートインスタンスの属性名はコンポーネントであることに注意してください。s を忘れないでください。コンポーネントの他のプロパティはインスタンスのプロパティと同じですが、データは関数である必要があります。

コンポーネントオブジェクトの各属性について、それはカスタムコンポーネントの名前であり、属性値はこのコンポーネントのオプションオブジェクトです。

部分的に登録されたコンポーネントは、そのサブコンポーネントでは使用できません。コンポーネント A をコンポーネント B で使用できるようにするには、次のように記述する必要があります:

var ComponentA = { /* ... */ }

var ComponentB = {
  components: {
    &#39;component-a&#39;: ComponentA
  },
  // ...
}

vue.js コンポーネントのグローバル登録とローカル登録の簡単な紹介と分析例

関連記事