這次帶給大家vue全域註冊和局部註冊使用詳解,使用vue全域註冊和局部的注意事項有哪些,以下是實戰案例,一起來看一下。
全域註冊,註冊的元件需要在初始化根實例之前註冊了元件;
局部註冊,透過使用元件實例選項註冊,可以使元件僅在另一個元件或實例的作用域中可用:
# 全域元件
js
Vue.component('tab-title',{ props:['title'], template:'<li v-on:click="$emit(\'change\')">{{title}}</li>' }) Vue.component('tab-content',{ props:['content'], template:'<p>{{content}}</p>' })
# 局部元件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="['tab-panel',{active:navTab.isActive}]" v-if="navTab.isActive"></p> </p> </p>
# 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:'<p>{{content}}</p>' } }, 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形式存在:
相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
推薦閱讀:
以上是vue全域註冊和局部註冊使用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!