vue.js學習之UI組件開發(fā)教程

更新時間：2017年07月03日 14:35:41 作者：rayman_v

前端開發(fā)中,隨著業(yè)務(wù)的增多,出于效率的考慮,我們對于組件化開發(fā)的需求也越來越迫切。下面這篇文章主要給大家介紹了關(guān)于vue.js之UI組件開發(fā)的相關(guān)資料，文中介紹的非常詳細，需要的朋友們下面來一起看看吧。

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

1. 新建組件：

<script src="/public/javascripts/vue.js"></script>
<style>
 #app1{background-color: red}
 #app2{background-color: blue}
</style>
<body>
<div id="app1">
 <box-one></box-one>
 <box-two></box-two>
 <boxThree></boxThree>
</div>
<div id="app2">
 <box-one></box-one>
 <box-two></box-two>
</div>
<box-one></box-one>
<box-two></box-two>
<script>
Vue.component('box-one', {
 template: '<div class="box-one">box-one</div>'
});
var app1 = new Vue({
 el: '#app1',
 components: {
 'box-two': {
  template: '<div class="box-two">box-two</div>'
 },
 'boxThree': {
  template: '<div class="boxThree">boxThree</div>'
 }
 }
});
var app2 = new Vue({
 el: '#app2'
});
</script>

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

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

<script src="/public/javascripts/vue.js"></script>
<style>
 .red{background-color: red}
 .blue{background-color: blue}
</style>
<body>
<div id="app1">
 <table class="red">
 <box-one></box-one>
 </table>
 <select class="red">
 <box-two></box-two>
 </select>

 <table class="blue">
 <tr is="box-one"></tr>
 </table>
 <select class="blue">
 <option is="box-two"></option>
 </select>
</div>
<script>
Vue.component('box-one', {
 template: '<tr><td>box-one</td></tr>'
});
Vue.component('box-two', {
 template: '<option>option</option>'
});
var app1 = new Vue({
 el: '#app1'
});
</script>

由于受到瀏覽器渲染標簽的限制，例如 table 標簽子元素只能是 tbody 或 tr 、select 標簽子元素只能是 option ，類似的其他更多的標簽，所以 vue 引入了 is 屬性；
如果使用的是組件文件 .vue 后綴的文件開發(fā)，則因為是字符串方式渲染的，所以不受限制；

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

<script src="/public/javascripts/vue.js"></script>
<body>
<div id="app1">
 <done-button></done-button>
</div>
<script>
Vue.component('done-button', {
 template: '<button>{{text}}</button>',
 data: function (){
 return {
  text: 'ok'
 }
 }
});
var app1 = new Vue({
 el: '#app1'
});
</script>

不同于 new Vue({}) 中的實例數(shù)據(jù)集，組件中的 data 數(shù)據(jù)集必須是一個函數(shù)，再使用函數(shù)返回一個對象集，否則會報錯；

4. 實例給組件傳值：

<script src="/public/javascripts/vue.js"></script>
<body>
<div id="app1">
 <done-button text="submit" textOne="submit1" text-two="submit2"></done-button>
</div>
<script>
Vue.component('done-button', {
 template: '<button :data-text="text" :data-text-one="textOne" :data-text-two="textTwo">{{text}}</button>',
 props: ['text', 'textOne', 'textTwo']
});
var app1 = new Vue({
 el: '#app1'
});
</script>

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

5. 組件標簽屬性使用動態(tài)數(shù)據(jù)：

<script src="/public/javascripts/vue.js"></script>
<style>
 .appNumber{background-color: red}
</style>
<body>
<div id="app1">
 <done-button :number="appNumber"></done-button>
 <button class="appNumber" @click="appNumber++">{{appNumber}}</button>
</div>
<script>
Vue.component('done-button', {
 template: '<button @click="number++">{{number}}</button>',
 props: ['number']
});
new Vue({
 el: '#app1',
 data: {
 appNumber: 0
 }
});
</script>

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

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

<script src="/public/javascripts/vue.js"></script>
<body>
<div id="app1">
 <done-button number1="a" number2="1" :number3="1" ></done-button>
</div>
<script>
Vue.component('done-button', {
 template: '<button :num1="number1" :num2="number2" :num3="number3">{{number1}}</button>',
 props: {
 number1: {
  type: Number
 },
 number2: {
  type: Number
 },
 number3: {
  type: Number
 }
 }
});
new Vue({
 el: '#app1'
});
</script>

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

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

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

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

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

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

<script src="/public/javascripts/vue.js"></script>
<body>
<div id="app1">
 <done-button v-on:child="father" ></done-button>
</div>
<script>
Vue.component('done-button', {
 template: '<button v-on:click="add()">增加</button>',
 methods: {
  add: function () {
   this.$emit('child', 11);
  }
 }
});
new Vue({
 el: '#app1',
 methods: {
  father: function(number) {
   console.log('father' + number);
  }
 }
});
</script>

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

8. 組件之間通信：

<script src="/public/javascripts/vue.js"></script>
<body>
<div id="app1">
 <done-button ></done-button>
 <cancel-button></cancel-button>
</div>
<script>
var bus = new Vue();
Vue.component('done-button', {
 template: '<button v-on:click="send()">發(fā)送</button>',
 methods: {
  send: function () {
   bus.$emit('done-emit', 11);
  }
 }
});
Vue.component('cancel-button', {
 template: '<p>{{text}}</p>',
 data: function (){
  return {
   text: '00'
  }
 },
 mounted: function() {
  var _this = this;
  bus.$on('done-emit', function(number) {
   _this.text = number;
  });
 }
});
new Vue({
 el: '#app1',
 methods: {
  call: function(value) {
   console.log('father:' + value);
  }
 }
});
</script>

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

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

<script src="/public/javascripts/vue.js"></script>
<body>
<div id="app1">
 <box></box>
 <box>
  <h4>box1</h4>
 </box>
 <box>{{box2Text}}</box>
</div>
<script>
Vue.component('box', {
 template: '<p><slot>默認</slot></p>'
});
new Vue({
 el: '#app1',
 data: {
  box2Text: 'box2'
 }
});
</script>

vue 默認在組件內(nèi)定義了 <slot> 標簽，用于獲取組件被使用時的內(nèi)容節(jié)點；
<slot> 標簽的內(nèi)容為組件的默認內(nèi)容節(jié)點；
內(nèi)容節(jié)點也可使用動態(tài)數(shù)據(jù)；

10. 多個 <slot> 標簽之間的使用：

<script src="/public/javascripts/vue.js"></script>
<body>
<div id="app1">
 <box>
  <p>ppppp</p>

  <p slot="h4">h4</p>
  <h4 slot="h4">h4</h4>

  <p slot="h5">h5</p>
  <h5 slot="h5">h5</h5>
 </box>
</div>
</div>
<script>
Vue.component('box', {
 template: [
  '<div id="box">',
   '<div class="default">',
    '<slot></slot>',
   '</div>',
   '<div class="h4">',
    '<slot name="h4"></slot>',
   '</div>',
   '<div class="h5">',
    '<slot name="h5"></slot>',,
   '</div>',
  '</div>',
 ].join('')
});
new Vue({
 el: '#app1'
});
</script>

沒有聲明 name 屬性的 <slot> 標簽，是為組件的內(nèi)容節(jié)點中沒有聲明 slot 屬性的標簽而占位；
聲明了 name 屬性的 <slot> 標簽，是為組件的內(nèi)容節(jié)點中與之相等 slot 屬性的標簽而占位；
多個標簽應(yīng)用了相同的 slot 屬性也會有效；

11. <slot> 標簽回傳數(shù)據(jù)給內(nèi)容節(jié)點：

<script src="/public/javascripts/vue.js"></script>
<body>
<div id="app1">
 <box >
  <template scope="props">
   <span>{{props.text}}</span>
  </template>
 </box>
</div>
</div>
<script>
Vue.component('box', {
 template: '<div id="box"><slot v-for="i in items" :text="i"></slot></div>',
 data: function (){
  return {
   items: [0,1,2,3,4]
  }
 }
});
new Vue({
 el: '#app1'
});
</script>

首先，數(shù)據(jù)是組件內(nèi)提供的，但數(shù)據(jù)的布局方式由實例調(diào)用組件時決定；
在組件的內(nèi)容節(jié)點內(nèi)，必須使用 <template> 標簽包含著要渲染的子元素，并且定義 scope="props" 屬性，而 <template> 標簽內(nèi)則是 props 對象的作用域上下文；
props 內(nèi)自動含有 <slot> 標簽中的屬性，例如事例中的 text 屬性，則可直接使用 props.text 訪問到 text 屬性的值；
當然，也可以結(jié)合 <slot name="header"> 使用，而 <template slot="header"> 即可；
<template> 標簽為 vue 保留的標簽，實際只是個占位符；

12. 動態(tài)切換組件：

<script src="/public/javascripts/vue.js"></script>
<body>
<div id="app1">
 <component :is="view"></component>
 <button @click="view = 'inlinebox'">change</button>
</div>
</div>
<script>
Vue.component('box', {
 template: '<div id="box">box</div>',
});
Vue.component('inlinebox', {
 template: '<div id="inlinebox">inlinebox</div>'
});
new Vue({
 el: '#app1',
 data: {
  view: 'box'
 }
});
</script>

<component> 標簽為 vue 保留的標簽，實際只是個占位符；
is 屬性可指定組件標簽名，也可綁定動態(tài)變量；

13. 在實例中訪問子元素對象：

<script src="/public/javascripts/vue.js"></script>
<body>
<div id="app1">
 <box ref="box1"></box>
</div>
</div>
<script>
Vue.component('box', {
 template: '<div id="box">box</div>',
});
new Vue({
 el: '#app1',
 mounted: function() {
  console.log(this.$refs);
 }
});
</script>