vue.js組件(component)
簡介:
組件(Component)是 Vue.js 最強大的功能之一。
組件可以擴展 HTML 元素,封裝可重用的代碼。
組件系統讓我們可以用獨立可復用的小組件來構建大型應用,幾乎任意類型的應用的界面都可以抽象為一個組件樹:
組件的註冊(官網)
有兩種方式註冊Vue組件:全局註冊和局部註冊,就好像歐元和英鎊的區別,
前者可以在各Vue實例中使用,後者只能在註冊他的Vue實例或者父組件中使用。
如果在組件中使用組件,就形成了組件的嵌套,如果組件裏嵌套的組件是自己,就形成組件的遞歸。
組件由兩部分組成
一部分是需要自定義的tag-name,以下面為例,tagname是<my-component>,
另一部分是options對象,裏面包含了該組件的模板,方法,props,data等細節
全局註冊:
Vue.component(‘my-component‘, {
// 選項
})
局部註冊:
var options={template:....}//組件的選項對象 new Vue({ el:‘#man‘, components:{ ‘my-component‘,options } });
props,events,slots
下面說說我覺得組件中的三個重點:prop,events和slots。當我看到組件這部分時,之前沒有接觸過mvvm類型的框架,
所以到這裏感覺是極限了,這時,找到熟悉的事物作類比是一個好辦法。如果把組件比成一間房子,上面的三只就是房子用來和外界通信的門窗。
在開始之前:應該記住一張圖和一句話:
這張圖對應的意思是:父組件通過 props 向下傳遞數據給子組件,子組件通過 events 給父組件發送消息。
1.自定義事件
想象一個場景。2048遊戲裏面,兩個子組件中的數據合並了,產生一個addscore事件,需要通知父組件容器,這時,就可以用自定義事件了:
//父組件中 <father v-on:addscore="addscore"></father> function addscore(){ this.score++; } //子組件中 this.$emit(‘addscore‘);
註意 ,在子組件中,子組件只負責觸發這個自定義事件,通過$emit方法來觸發,而在父組件中則定義事件觸發之後的回調函數。好吧,其實vue官方教程的兩個button觸發add事件看起來是個更好的例子。。。。
2.props
再想象一個場景,2048中,父組件中的data中有一個定義了所有card的值的數組,現在要把這些值傳到每一個card中,這時就用到props:
//爹組件 //在模板中,為子組件寫一個自定義屬性card,用來把cardNum傳給子組件 <children :card="card_num"></children> data:{card_num:8} //****子組件中****** <div>{{card}}</div> 在組件的props字段中加入子組件的自定義屬性 { data:.... computed:.... props:{card:null} }
其實理解起來很簡單,vue的子組件對父組件來說被包裝成為一個類似於<children></children>的標簽,正如你在父組件中看到的那樣。但是vue為我們留了一個props屬性,就像上帝給人類五官用來感受世界一樣,組件用props和自定義事件用來和父組件傳遞消息。
這也是一種封裝,對父組件隱藏了內部的實現,只留下了props作為接口。接口在現實世界也很常見,比如顯示器對主機的接口,你不必管顯示器的內部實現,只要知道接上主機就能顯示信息了就行。
3.slots
如果你了解過es6的模板字符串,那麽理解起這個來將毫不費勁。我當時可是被這個slots搞得稀裏糊塗的。。。當然當時不知道模板引擎,也不知道模板字符串。slots就是在組件中插入內容的機制。
在<p>等原生的標簽裏插入內容很簡單,就直接寫就行了(說了一句廢話),而在組件中寫入內容就有講究了,比如<children>我還是個寶寶</children>,
由於組件的模板一般是一堆原生標簽一起構成的,那麽上面這麽寫,究竟應該把內容插到那個元素中就成了問題。於是就有了<slot></slot>元素。
solt元素就是用來接受父組件放到子組件的內容的。不知為什麽,到了這裏我會想起學習機上插遊戲卡的例子。。。舉個例子:
//學習機組件 <div> <h2>小霸王學習機</h2> <slot> 內置魂鬥羅 </slot> </div>
//小朋友父組件
<
div
>
<
h1
>我要玩遊戲</
h1
>
<
xue-xi-ji
>
<
p
>插入雙截龍遊戲卡</
p
>//插入的內容
</
xue-xi-ji
>
</
div
>
最後得到的就是小學生愉快的玩雙截龍了
<div> <h1>我要玩遊戲</h1> -------------------------------組件區域—————————————— <h2>小霸王學習機</h2> ————————slot區域—————————————— <p>插入雙截龍遊戲卡</p>//插入的內容 </div>
當父組件不往子組件標簽中添加任何字符時,子組件會顯示默認內容,如果有的話,也就是說魂鬥羅。。
具名slot是說組件中有大於一個地方需要插值時,需要給slot取個名字。就像電腦的接口,有usb的,也有接投影的HDMI接口,為的是將多條內容放到正確的地方。我們知道,在組件內部,this指向組件自己,那麽組件的slot內容可以通過this.$slots獲得被插入的vnode節點。
動態組件
動態組件就是為了適應頁面的局部刷新而生的,舉個我用過的例子:todolist在線小demo
當我點擊寫日記button時,頁面會變成一個markdown編輯器界面。這就是動態組件。實現的代碼如下
<
keep-alive
>
<
compoment
v-bind:is=‘currentview‘></
compoment
>
</
keep-alive
>
methods: { toggleview: function() { this.currentview = (this.currentview == ‘todolist‘) ? ‘write‘ : ‘todolist‘; } },
當我點擊上面的button時,觸發toggleview方法,導致is綁定的組件名發生變化,如果當前是write組件,那麽變成todolist組件。那麽<keep-alive>標簽又有什麽用呢?標簽字面意思是活著。。就是當todolist組件由顯示變成隱藏時,
組件的數據狀態會被保存下來而不是被完全destory,當組件由隱藏再次變為顯示時,當前的狀態得以保留。比方你在write組件中寫一段md文檔,然後切換回todolist組件,如果沒有keep-alive組件,再切換回write組件時,之前編輯的東西就會丟失。
#與自定義元素的關系
你可能已經註意到 Vue 組件非常類似於自定義元素——它是 Web 組件規範的一部分,這是因為 Vue 的組件語法部分參考了該規範。例如 Vue 組件實現了 Slot API 與 is
特性。但是,還是有幾個關鍵差別:
-
Web 組件規範仍然處於草案階段,並且尚無瀏覽器原生實現。相比之下,Vue 組件不需要任何補丁,並且在所有支持的瀏覽器 (IE9 及更高版本) 之下表現一致。必要時,Vue 組件也可以包裝於原生自定義元素之內。
-
Vue 組件提供了純自定義元素所不具備的一些重要功能,最突出的是跨組件數據流,自定義事件通信以及構建工具集成。
vue.js組件(component)