Vue——組件

　　組件化思想是Vue最爲核心的一個思想

　　Vue中的每個實例都是一個組件，也就是說一個項目是由不少個組件/實例組成的，所以，掌握組件的知識點尤其重要

 

基本概念

　　組件即爲一個能夠複用的Vue實例，能夠在Vue根實例中反覆使用

聲明方式

　　分兩種：全局和局部

　　全局組件用Vue實例的component方法來建立

　　

　　全局組件能夠在Vue根實例下直接使用其名字爲標籤名的標籤來調用，無需註冊

　　

　　而局部組件則是用一個對象來建立的，對象名即組件名，但使用以前須要註冊（Vue實例的components中）

　　若是對原有的組件名不滿意，能夠在註冊時修改

　　

　　

　　因爲組件是能夠複用的Vue實例，所以組件中也能夠添加data、computed、methods、watch等，只有el是不能夠添加的（僅屬於根實例）

根元素

　　組件中，一個模板中只能有一個根元素

　　以下就是不行的，會報錯，只認第一個元素，其他元素都刪除

　　

　　這時須要用一個父元素充當根元素，以下

　　

 

組件傳值

插槽

　　當須要向組件內添加內容的時候，可能出現以下的狀況

　　

　　這時hello不會出如今頁面中，所以須要添加一個插槽，以便讓添加在組件中的內容添加到其中，並被瀏覽器渲染出來

　　

name屬性

　　若是出現多個插槽，全部添加進去的內容會被複製，並插入這多個插槽中，可是並非咱們所須要的效果

　　

　　這裏就須要對插槽添加name屬性，以標識出不一樣的插槽，具體內容須要插入哪一個插槽，在標籤中添加slot屬性並書寫對應的插槽的name值

　　

動態組件

　　對於註冊過的組件，若是想動態變動調用的組件，可使用Vue自帶的component標籤，在其中用v-bind綁定is屬性

　　

元素渲染

　　有些元素內部的標籤是固定的，例如table中只能夠有tr、td，若是在table標籤中添加了非tr、td標籤，則頁面渲染時，會把內部標籤渲染到外面

　　

　　

　　爲了解決這種問題，能夠在table標籤中正常添加tr標籤，在tr標籤上添加is屬性，屬性值爲須要添加在這個位置的組件名稱

　　

refs

　　ref是Vue裏用來獲取DOM節點的一個方法，綁定在須要獲取節點的標籤上，能夠在mounted這個生命週期裏用this.$refs.ref名稱的方法取到相應的DOM節點

　　獲取以後，就能夠對這個DOM節點進行編輯了（相似於原生的JS）

　　

　　而在組件中，給組件添加上ref，獲得的是組件自己的引用

　　（未完待續）