首頁 > 文章 > web前端 > 在vue元件中如何實現全域註冊和局部註冊

在vue元件中如何實現全域註冊和局部註冊

亚连原創: 2018-06-02 16:52:262069瀏覽

下面我就為大家分享一篇vue 元件全域註冊和局部註冊的實現，具有很好的參考價值，希望對大家有幫助。

全域註冊，註冊的元件需要在初始化根實例之前註冊了元件；

局部註冊，透過使用元件實例選項註冊，可以使元件僅在另一個元件或實例的作用域中可用：

全域元件

#js

Vue.component(&#39;tab-title&#39;,{
   props:[&#39;title&#39;],
   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;
 })

局部元件demo：

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>

var app=new Vue({
      el: &#39;#app&#39;,
     components: {
       &#39;tab-title&#39;: {
        props:[&#39;info&#39;],//接受父元素传递的参数
        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實例都會代理這個實例的data屬性物件裡的所有的屬性

所有的Vue實例本身保羅的屬性和方法，都以$開頭來區別，對應Vue.set

例如：

vm.$data

vm.$methods

vm.$watch

這個有利於和data屬性物件的資料來區分

多有的指令都以v-xxx形式存在：