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

この記事では、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('my-component-name', { /* ... */ })

これは、登録したコンポーネント 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: '#app'
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})

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

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

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

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

var ComponentB = {
  components: {
    'component-a': ComponentA
  },
  // ...
}

関連する推奨事項:

vue のグローバル登録とローカル登録の使用方法の詳細な説明

vueコンポーネント登録フォーム

以上がvue.js コンポーネントのグローバル登録とローカル登録の簡単な紹介と分析例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。