本文主要給大家介紹了關(guān)于vue.js之UI組件開發(fā)的相關(guān)內(nèi)容，分享出來供大家參考學(xué)習(xí)，下面來一起看看詳細(xì)的介紹：

成都創(chuàng)新互聯(lián)公司是專業(yè)的甘泉網(wǎng)站建設(shè)公司，甘泉接單;提供成都網(wǎng)站建設(shè)、成都做網(wǎng)站,網(wǎng)頁設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行甘泉網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來合作!

1. 新建組件：

• Vue.component 方法用于注冊(cè)全局組件， new Vue({ components: {}}) 用于注冊(cè)某個(gè)實(shí)例內(nèi)使用的組件，所以 在 #app2 中失效；
• 由于瀏覽器渲染標(biāo)簽時(shí)會(huì)把標(biāo)簽全部轉(zhuǎn)成小寫，駝峰式組件名稱會(huì)失效，如事例中的 ；
• 在實(shí)例以外無法使用任何組件；
  

2. 瀏覽器渲染網(wǎng)頁標(biāo)簽的限制：

• 由于受到瀏覽器渲染標(biāo)簽的限制，例如 table 標(biāo)簽子元素只能是 tbody 或 tr 、select 標(biāo)簽子元素只能是 option ，類似的其他更多的標(biāo)簽，所以 vue 引入了 is 屬性；
• 如果使用的是組件文件 .vue 后綴的文件開發(fā)，則因?yàn)槭亲址绞戒秩镜模圆皇芟拗疲?br />

3. 組件中的 data 數(shù)據(jù)集：

• 不同于 new Vue({}) 中的實(shí)例數(shù)據(jù)集，組件中的 data 數(shù)據(jù)集必須是一個(gè)函數(shù)，再使用函數(shù)返回一個(gè)對(duì)象集，否則會(huì)報(bào)錯(cuò)；
  

4. 實(shí)例給組件傳值：

• props 定義的字符串?dāng)?shù)組中的值，可以像 data 數(shù)據(jù)集一樣在組件內(nèi)自由調(diào)用；
• props 定義的字符串?dāng)?shù)組中的值，會(huì)作為組件標(biāo)簽中的標(biāo)簽屬性名，給實(shí)例賦值；
• 受瀏覽器渲染標(biāo)簽屬性的影響，標(biāo)簽屬性的命名如果使用駝峰式，則使用時(shí) vue 會(huì)自動(dòng)生成對(duì)應(yīng)的短橫線隔開式屬性名，如事例中的 text-two；
  

5. 組件標(biāo)簽屬性使用動(dòng)態(tài)數(shù)據(jù)：

 
 {{appNumber}}

• 實(shí)例中的 appNumber 變化時(shí)，組件中的 number 會(huì)跟著變化；
• 組件中的 number 變化時(shí)，實(shí)例中的 appNumber 并不會(huì)變化；
• 實(shí)例中的 appNumber 的值，會(huì)覆蓋組件內(nèi) number 的值；
• 但如果 appNumber 的值是數(shù)組或?qū)ο?，由于是引用類型，則雙方都會(huì)互相影響；

6. 自定義組件屬性的值的規(guī)則：

• props 允許接受一個(gè)對(duì)象作為參數(shù)，每個(gè)參數(shù)作為一個(gè)元素屬性，type 為屬性的值期待的類型；
• 如果條件不符合，vue 的開發(fā)版下會(huì)在 console 打印出錯(cuò)誤信息，但功能還是能正常傳值的；
• 事例中 number2 傳遞的其實(shí)是 String 類型的 '1'，而只有 :number3 這種賦值才能傳遞數(shù)值類型的 1；
• 可選項(xiàng)：

{
 // 屬性類型： String、Number、Boolean、Function、Object、Array，null-任意類型，
 // 可以使用數(shù)組多選
 type: null,

 // 是否必須被賦值：true、false
 required: false,

 // 默認(rèn)值：可以是一般任意值或有返回值的函數(shù)
 default: '',

 // 自定義判斷函數(shù)：參數(shù) value 為調(diào)用時(shí)傳入的值，
 // 返回 true、false 來通知 vue 機(jī)制是否報(bào)錯(cuò)
 validator: function(value){ return true } 
}

7. 組件內(nèi)給實(shí)例發(fā)送通知：

• 組件內(nèi)無法直接與組件外數(shù)據(jù)集綁定，只能發(fā)送事件通知，組件內(nèi)使用 this.$emit('child', 11) 告訴實(shí)例，該調(diào)用 child 事件了，后面的參數(shù)會(huì)變成 child 的調(diào)用參數(shù)傳遞；
• 實(shí)例在初始化組件時(shí)，定義 v-on:child="father" 元素屬性，來監(jiān)聽 child 事件收到通知時(shí)應(yīng)該執(zhí)行什么處理，通過 father 的形參，可以直接訪問 child 的調(diào)用參數(shù)；
  

8. 組件之間通信：

• 可以定義一個(gè)全局實(shí)例 bus ，在不同組件內(nèi)使用 bus.$emit 發(fā)送通知，使用 bus.$on 監(jiān)聽通知；
  

9. 組件內(nèi)容節(jié)點(diǎn)的分發(fā)：

 
 
  
box1
 
 {{box2Text}}

• vue 默認(rèn)在組件內(nèi)定義了 標(biāo)簽，用于獲取組件被使用時(shí)的內(nèi)容節(jié)點(diǎn)；
• 標(biāo)簽的內(nèi)容為組件的默認(rèn)內(nèi)容節(jié)點(diǎn)；
• 內(nèi)容節(jié)點(diǎn)也可使用動(dòng)態(tài)數(shù)據(jù)；
  

10. 多個(gè) 標(biāo)簽之間的使用：

 
  
ppppp

  
h5
  
h5

  
h6
  
h6