vue 組件全局注冊(cè)和局部注冊(cè)的實(shí)現(xiàn)

更新時(shí)間：2018年02月28日 15:22:51 作者：museions

下面小編就為大家分享一篇vue 組件全局注冊(cè)和局部注冊(cè)的實(shí)現(xiàn)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

全局注冊(cè)，注冊(cè)的組件需要在初始化根實(shí)例之前注冊(cè)了組件；

局部注冊(cè)，通過(guò)使用組件實(shí)例選項(xiàng)注冊(cè)，可以使組件僅在另一個(gè)組件或者實(shí)例的作用域中可用：

全局組件

js

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

局部組件demo：

html

<div 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>
  <div class="tabContent">
   <div v-for="navTab in navTabs" is="tab-content" v-bind:content="navTab.tabContent" 
   v-bind:class="['tab-panel',{active:navTab.isActive}]" v-if="navTab.isActive"></div>
  </div>
  </div>

js

var app=new Vue({
      el: '#app',
     components: {
       'tab-title': {
        props:['info'],//接受父元素傳遞的參數(shù)
        template:'<li v-on:click="$emit(\'addactive\')">{{info}}</li>'//點(diǎn)擊時(shí)傳遞通過(guò)$emit子元素傳遞給父元素調(diào)用 addactive方法（不能使用駝峰寫法）
        },
       'tab-content':{
         props:["content"],
        template:'<div>{{content}}</div>'
       }
     },
     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:'this is tab1 content'
       },
       {
        text:"tab2",
        isActive:false,
        tabContent:'this is tab2 content'
       },
       {
        text:"tab3",
        isActive:false,
        tabContent:'this is tab3 content'
       }
      ]
     }
    });

組件實(shí)例的作用域是孤立的。這意味著不能再子組件的模板內(nèi)直接引用父組件的數(shù)據(jù)。要讓子組件可以使用父組件的數(shù)據(jù)，我們需要通過(guò)子組件的props選項(xiàng)。

子組件要顯式地用 props 選項(xiàng)聲明它期待獲得的數(shù)據(jù)

在模板中，要?jiǎng)討B(tài)地綁定父組件的數(shù)據(jù)到字模板的props,與綁定到任何普通的HTMO特性相類似。就是使用 v-bind。每當(dāng)父組件的數(shù)據(jù)變化時(shí)，該變化也會(huì)傳遞給子組件：

所有的vuejs組件都是被擴(kuò)展的vue實(shí)例

每一個(gè)Vue實(shí)例都會(huì)代理這個(gè)實(shí)例的data屬性對(duì)象里的所有的屬性

所有的Vue實(shí)例本身保羅的屬性和方法，都以$開(kāi)頭來(lái)區(qū)別，對(duì)應(yīng)Vue.set

例如：

vm.$data

vm.$methods

vm.$watch

這個(gè)有利于和data屬性對(duì)象的數(shù)據(jù)來(lái)區(qū)分

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