強(qiáng)大Vue.js組件淺析

更新時(shí)間：2016年09月12日 10:09:40 作者：heavi

這篇文章主要為大家介紹了Vue.js組件，組件是Vue.js最強(qiáng)大的功能之一，感興趣的小伙伴們可以參考一下

什么是組件：組件是Vue.js最強(qiáng)大的功能之一。組件可以擴(kuò)展HTML元素，封裝可重用的代碼。在較高層面上，組件是自定義的元素，Vue.js的編譯器為它添加特殊功能。在有些情況下，組件也可以是原生HTML元素的形式，以is特性擴(kuò)展。

如何注冊(cè)組件？

需要使用Vue.extend方法創(chuàng)建一個(gè)組件，然后使用Vue.component方法注冊(cè)組件。Vue.extend方法格式如下：

var MyComponent = Vue.extend({
 // 選項(xiàng)...后面再介紹
})

如果想要其他地方使用這個(gè)創(chuàng)建的組件，還得個(gè)組件命個(gè)名：

Vue.component('my-component', MyComponent)

命名之后即可在HTML標(biāo)簽中使用這個(gè)組件名稱(chēng)，像使用DOM元素一樣。下面來(lái)看看一個(gè)完整的組件注冊(cè)和使用例子。

html代碼：

<div id="example">
 <my-component></my-component>
</div>

js代碼：

// 定義
var MyComponent = Vue.extend({
 template: '<div>A custom component!</div>'
})

// 注冊(cè)
Vue.component('my-component', MyComponent)

// 創(chuàng)建根實(shí)例
new Vue({
 el: '#example'
})

輸出結(jié)果：

 <div id="example">
 <div>A custom component!</div>
</div

嵌套組件
組件本身也可以包含組件，下面的parent組件就包含了一個(gè)命名為child-component組件，但這個(gè)組件只能被parent組件使用:

var child = Vue.extend({
 template: '<div>A custom component!</div>'
});
var parent = Vue.extend({

 template: '<div>Parent Component: <child-component></child-component></div>',
 components: {
 'child-component': child
 }
});
Vue.component("parent-component", parent);

上面的定義過(guò)程比較繁瑣，也可以不用每次都調(diào)用Vue.component和Vue.extend方法:

// 在一個(gè)步驟中擴(kuò)展與注冊(cè)
Vue.component('my-component', {
template: '<div>A custom component!</div>'
})

// 局部注冊(cè)也可以這么做
var Parent = Vue.extend({
 components: {
 'my-component': {
  template: '<div>A custom component!</div>'
 }
 }
})

動(dòng)態(tài)組件

多個(gè)組件可以使用同一個(gè)掛載點(diǎn)，然后動(dòng)態(tài)的在他們之間切換。使用保留的<component>元素，動(dòng)態(tài)地綁定到它的is特性。下面的列子在同一個(gè)vue實(shí)例下掛了home、posts、archive三個(gè)組件，通過(guò)特性currentView動(dòng)態(tài)切換組件顯示。

html代碼：

<div id="dynamic">
 <button id="home">Home</button>
 <button id="posts">Posts</button>
 <button id="archive">Archive</button>
 <br>
 <component :is="currentView"></component>
</div>

js代碼：

var vue = new Vue({
 el:"#dynamic",
 data: {
 currentView: "home"
 },
 components: {
 home:{
  template: "Home"
 },
 posts: {
  template: "Posts"
 },
 archive: {
  template: "Archive"
 }
 }
});
document.getElementById("home").onclick = function(){
vue.currentView = "home";
};
document.getElementById("posts").onclick = function(){
vue.currentView = "posts";
};
document.getElementById("archive").onclick = function(){
vue.currentView = "archive";
};

組件和v-for
<my-component v-for="item in items"></my-component>

不能傳遞數(shù)據(jù)給組件，因?yàn)榻M件的作用域是獨(dú)立的。為了傳遞數(shù)據(jù)給組件，應(yīng)當(dāng)使用props:

<my-component
v-for="item in items"
:item="item"
:index="$index">
</my-component>

不自動(dòng)把 item 注入組件的原因是這會(huì)導(dǎo)致組件跟當(dāng)前 v-for 緊密耦合。顯式聲明數(shù)據(jù)來(lái)自哪里可以讓組件復(fù)用在其它地方。

深入響應(yīng)式原理

在組件綁定數(shù)據(jù)時(shí)，如何綁定才能夠有效，并且可動(dòng)態(tài)修改、添加屬性？看看下面的原理介紹。

如何追蹤變化：把一個(gè)不同對(duì)象傳給vue實(shí)例作為data的選項(xiàng)，vue.js將遍歷它的屬性，用Object.defineProperty將它轉(zhuǎn)換為getter/setter。這是ES5特性，所有vue.js不支持IE8或更低版本。

模板中每個(gè)指令/數(shù)據(jù)綁定都有一個(gè)對(duì)應(yīng)的watcher對(duì)象，在計(jì)算過(guò)程中它把屬性記錄為依賴(lài)。之后當(dāng)依賴(lài)的setter被調(diào)用時(shí) ，會(huì)觸發(fā)watcher重新計(jì)算。流程如下所示：

變化檢測(cè)問(wèn)題：vue.js不能檢測(cè)到對(duì)象屬性的添加或刪除，屬性必須在data上才能讓vue.js轉(zhuǎn)換它為getter/setter模式，才能有響應(yīng)。例如：

var data = { a: 1 };
var vm = new Vue({
data: data
});
// `vm.a` 和 `data.a` 現(xiàn)在是響應(yīng)的
vm.b = 2
// `vm.b` 不是響應(yīng)的
data.b = 2
// `data.b` 不是響應(yīng)的

不過(guò)，也有辦法在實(shí)例創(chuàng)建后添加屬性并且讓它是相應(yīng)的?？梢允褂胹et(key,value)實(shí)例方法：

vm. set('b', 2)
// `vm.b` 和 `data.b` 現(xiàn)在是響應(yīng)的

對(duì)于普通對(duì)象可以使用全局方法：Vue.set(object, key, value)：
Vue.set(data, 'c', 3)
// `vm.c` 和 `data.c` 現(xiàn)在是響應(yīng)的

初始化數(shù)據(jù)：盡管Vue.js提供動(dòng)態(tài)的添加相應(yīng)屬性，還是推薦在data對(duì)象上聲明所有的相應(yīng)屬性。

不這么做：

var vm = new Vue({
 template: '<div>{{msg}}</div>'
})
// 然后添加 `msg`
vm.$set('msg', 'Hello!')

應(yīng)該這么做：

var vm = new Vue({
 data: {
 // 以一個(gè)空值聲明 `msg`
 msg: ''
 },
 template: '<div>{{msg}}</div>'
})
// 然后設(shè)置 `msg`
vm.msg = 'Hello!'

組件完整案例
下面介紹的例子實(shí)現(xiàn)了模態(tài)窗口功能，代碼也比較簡(jiǎn)單。

html代碼：

<!-- 實(shí)現(xiàn)script定義一個(gè)模板 -->
<script type="x/template" id="modal-template">
 <!--模板是否顯示通過(guò)v-show="show"來(lái)設(shè)置， transition設(shè)置動(dòng)畫(huà)效果-->
 <div class="modal-mask" v-show="show" transition="modal">
 <div class="modal-wrapper">
  <div class="modal-container">
  <div class="modal-header">
   <!--slot 相當(dāng)于header占位符-->
   <slot name="header">
   default header
   </slot>
  </div>
  <div class="modal-body">
   <!--slot 相當(dāng)于body占位符-->
   <slot name="body">
   default body
   </slot>
  </div>
  <div class="modal-footer">
   <!--slot 相當(dāng)于footer占位符-->
   <slot name="footer">
   default footer
   </slot>
   <button class="modal-default-button" @click="show = false">OK</button>
  </div>
  </div>
 </div>
 </div>
</script>
<div id="app">
 <!--點(diǎn)擊按鈕時(shí)設(shè)置vue實(shí)例特性showModal的值為true-->
 <button id="show-modal" @click="showModal = true">show modal</button>
 <!--modal是自定義的一個(gè)插件，插件的特性show綁定vue實(shí)例的showModal特性-->
 <modal :show.sync="showModal">
 <!--替換modal插件中slot那么為header的內(nèi)容-->
 <h3 slot="header">Custom Header</h3>
 </modal>
</div>

js代碼：

//定義一個(gè)插件，名稱(chēng)為modal
Vue.component("modal", {
 //插件的模板綁定id為modal-template的DOM元素內(nèi)容
 template: "#modal-template",
 props: {
 //特性，類(lèi)型為布爾
 show:{
  type: Boolean,
  required: true,
  twoWay: true
 }
 }
});
//實(shí)例化vue，作用域在id為app元素下，
new Vue({
 el: "#app",
 data: {
 //特性，默認(rèn)值為false
 showModal: false
 }
});

css代碼：

.modal-mask {
 position: fixed;
 z-index: 9998;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: rgba(0, 0, 0, .5);
 display: table;
 transition: opacity .3s ease;
}

.modal-wrapper {
 display: table-cell;
 vertical-align: middle;
}

.modal-container {
 width: 300px;
 margin: 0px auto;
 padding: 20px 30px;
 background-color: #fff;
 border-radius: 2px;
 box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
 transition: all .3s ease;
 font-family: Helvetica, Arial, sans-serif;
}

.modal-header h3 {
 margin-top: 0;
 color: #42b983;
}

.modal-body {
 margin: 20px 0;
}

.modal-default-button {
 float: right;
}

/*
* the following styles are auto-applied to elements with
* v-transition="modal" when their visiblity is toggled
* by Vue.js.
*
* You can easily play with the modal transition by editing
* these styles.
*/

.modal-enter, .modal-leave {
 opacity: 0;
}

.modal-enter .modal-container,
.modal-leave .modal-container {
 -webkit-transform: scale(1.1);
 transform: scale(1.1);
}

本文已被整理到了《Vue.js前端組件學(xué)習(xí)教程》，歡迎大家學(xué)習(xí)閱讀。

關(guān)于vue.js組件的教程，請(qǐng)大家點(diǎn)擊專(zhuān)題vue.js組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。

由于自己在項(xiàng)目中還沒(méi)怎么深入使用組件的功能，所以自己對(duì)組件的理解也不深入，介紹的比較膚淺，謝謝大家的閱讀。

您可能感興趣的文章: