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

如何注冊組件？

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

?

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

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

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

?

命名之后即可在HTML標(biāo)簽中使用這個(gè)組件名稱，像使用DOM元素一樣，下面演示一下完整的組件注冊和使用的例子。

html代碼：

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

　　js代碼：

// 定義 var MyComponent = Vue.extend({template: '<div>A custom component!</div>' })// 注冊 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);

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

// 在一個(gè)步驟中擴(kuò)展與注冊 Vue.component('my-component', { template: '<div>A custom component!</div>' })// 局部注冊也可以這么做 var Parent = Vue.extend({components: {'my-component': {template: '<div>A custom component!</div>'}} })

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

多個(gè)組件可以同時(shí)使用一個(gè)掛載點(diǎn)，然后動(dòng)態(tài)的在他們之間切換。使用保留的<component>元素，動(dòng)態(tài)的綁定到它的is特性。下面的例子在同一個(gè)vue實(shí)例下掛載了home、posts、achive三個(gè)組件，通過特性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ù)來自哪里可以讓組件復(fù)用在其它地方。

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

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

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

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

?

轉(zhuǎn)載于:https://www.cnblogs.com/myprogramer/p/7545055.html

總結(jié)

以上是生活随笔為你收集整理的说说说vue.js中的组的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。