全局注冊，注冊的組件需要在初始化根實例之前注冊了組件；
局部注冊，通過使用組件實例選項注冊，可以使組件僅在另一個組件或者實例的作用域中可用：
全局組件
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'],//接受父元素傳遞的參數 template:'<li v-on:click="$emit(/'addactive/')">{{info}}</li>'//點擊時傳遞通過$emit子元素傳遞給父元素調用 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' } ] } });組件實例的作用域是孤立的。這意味著不能再子組件的模板內直接引用父組件的數據。要讓子組件可以使用父組件的數據，我們需要通過子組件的props選項。
子組件要顯式地用 props 選項聲明它期待獲得的數據
在模板中，要動態地綁定父組件的數據到字模板的props,與綁定到任何普通的HTMO特性相類似。就是使用 v-bind。每當父組件的數據變化時，該變化也會傳遞給子組件：
所有的vuejs組件都是被擴展的vue實例
每一個Vue實例都會代理這個實例的data屬性對象里的所有的屬性
所有的Vue實例本身保羅的屬性和方法，都以$開頭來區別，對應Vue.set
例如：
vm.$data
vm.$methods
vm.$watch
這個有利于和data屬性對象的數據來區分
多有的指令都以v-xxx形式存在：
以上這篇vue 組件 全局注冊和局部注冊的實現就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。
新聞熱點
疑難解答
