Vue コンポーネントでグローバル登録とローカル登録を実装する方法

ここで、vue コンポーネントのグローバル登録とローカル登録の実装に関する記事を共有します。これは非常に参考になるので、皆さんのお役に立てれば幸いです。

グローバル登録、登録されたコンポーネントはルート インスタンスを初期化する前にコンポーネントを登録する必要があります。

部分登録、コンポーネント インスタンス オプションを使用して登録すると、コンポーネントは別のコンポーネントまたはインスタンスのスコープ内でのみ使用可能になります。

グローバルコンポーネント

js

Vue.component('tab-title',{
   props:['title'],
   template:&#39;<li v-on:click="$emit(\&#39;change\&#39;)">{{title}}</li>&#39;
 })
 Vue.component(&#39;tab-content&#39;,{
   props:[&#39;content&#39;],
   template:&#39;<p>{{content}}</p>&#39;
 })

ローカルコンポーネントのデモ:

html

<p id="app">
  <ul class="navTab">
   <li v-for="(navTab,index) in navTabs" is="tab-title" v-bind:info="navTab.text" v-bind:class="{active:navTab.isActive}" v-on:addactive="switchActive(index)"></li>
  </ul>
  <p class="tabContent">
   <p v-for="navTab in navTabs" is="tab-content" v-bind:content="navTab.tabContent" 
   v-bind:class="[&#39;tab-panel&#39;,{active:navTab.isActive}]" v-if="navTab.isActive"></p>
  </p>
  </p>

js

var app=new Vue({
      el: '#app',
     components: {
       'tab-title': {
        props:['info'],//接受父元素传递的参数
        template:&#39;<li v-on:click="$emit(\&#39;addactive\&#39;)">{{info}}</li>&#39;//点击时传递通过$emit子元素传递给父元素调用 addactive方法（不能使用驼峰写法）
        },
       &#39;tab-content&#39;:{
         props:["content"],
        template:&#39;<p>{{content}}</p>&#39;
       }
     },
     methods:{
       switchActive:function(index){
        for(var i=0;i<this.navTabs.length;i++){
         this.navTabs[i].isActive=false;
        }
        this.navTabs[index].isActive=true;
        
       }
     },
     data:{
      navTabs:[
       {
        text:"tab1",
        isActive:true,
        tabContent:&#39;this is tab1 content&#39;
       },
       {
        text:"tab2",
        isActive:false,
        tabContent:&#39;this is tab2 content&#39;
       },
       {
        text:"tab3",
        isActive:false,
        tabContent:&#39;this is tab3 content&#39;
       }
      ]
     }
    });

コンポーネントインスタンスのスコープは分離されています。これは、親コンポーネントのデータを子コンポーネントのテンプレートで直接参照できないことを意味します。子コンポーネントに親コンポーネントのデータを使用させるには、子コンポーネントの props オプションを渡す必要があります。

子コンポーネントは、props オプションを使用して取得することが期待されるデータを明示的に宣言する必要があります

テンプレートでは、親コンポーネントのデータはサブテンプレートの props に動的にバインドされる必要があります。これは次と同じです。同様の通常の HTMO 機能へのバインディング。 v-bind を使用するだけです。親コンポーネントのデータが変更されると、その変更は子コンポーネントにも渡されます:

すべての vuejs コンポーネントは拡張された vue インスタンスです

各 Vue インスタンスはインスタンス内のすべてのデータ属性をプロキシします

すべてVue インスタンス自体のプロパティとメソッドは、Vue.set

に対応する $ で始まることで区別されます。例:

vm.$data

vm.$methods

vm.$watch

これは、データ属性オブジェクトのデータと区別するのに役立ちます

多くの命令はv-xxxの形式で存在します:

上記は私が皆さんのためにコンパイルしたものです、私は願っています将来的には誰にとっても役立つでしょう。

関連記事:

Vue2.0イベントのブロードキャストと受信(オブザーバーモード)

vue2.0にstyle/cssローダーをインストールする方法

iViewテーブルの高さの動的設定方法

以上がVue コンポーネントでグローバル登録とローカル登録を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。