現(xiàn)在比較火的前段JS框架像 VUE,REACK,ANGULAR，這三種框架都有共同的特點(diǎn)那就是，雙向數(shù)據(jù)綁定，組件化開(kāi)發(fā)。而在angular1.5的版本之前，都是以directive作為組件化的形式，而directive本身是一個(gè)指令，而并非是一個(gè)組件，所以它并不能很好的承擔(dān)組件這一個(gè)職責(zé)，所以google在angular1.5的版本中推出了component組件，用于承擔(dān)應(yīng)用之中組件化開(kāi)發(fā)的重?fù)?dān)，那么component到底是如何工作的？又應(yīng)該如何使用呢？我們將在這一章中詳細(xì)的探究一下component組件的使用方式。
在AngularJS中，Component比diective更適合于基于組件的開(kāi)發(fā)形式。
先來(lái)看一個(gè)比較簡(jiǎn)單的Component事例。
index.html
<!DOCTYPE html><html lang="en" ng-app="ComponentTestApp"><head> <meta charset="UTF-8"> <title>Document</title></head><body ng-controller="MainCtrl as ctrl"> <h3>hero</h3> <br> <hero-detail hero='ctrl.hero'></hero-detail> <script src="js/angular.js"></script> <script src="js/index.js"></script> <script src="js/heroDetail.js"></script></body></html>在index.html中我們定義了一個(gè) hero-detail 標(biāo)簽，這個(gè)標(biāo)簽的聲明方式與 directive 相似 ， 注意在這個(gè)標(biāo)簽中定義了一個(gè)屬性 hero-detail ， 這個(gè)定義的屬性是做什么用的那？我們接著往下看
index.js
(function(angular){ angular.module('ComponentTestApp',[]) .controller('MainCtrl',function(){ this.hero = { name:'Sunday' } });})(angular);在index.js中我們聲明了這個(gè)controller，并且在controller中我們寫(xiě)了這么一行代碼
this.hero = { name:'Sunday' }相信細(xì)心的小伙伴已經(jīng)看出來(lái)了，沒(méi)錯(cuò)，這里對(duì)應(yīng)我們?cè)趇ndex.html中聲明的屬性 hero='ctrl.hero' 是component中通信的關(guān)鍵。
heroDetail.html
<h1>HeroName: {{$ctrl.hero.name}}</h1>在 heroDetail.html 中我們把從index.html中傳輸過(guò)來(lái)的值展示出來(lái)。
heroDetail.js
(function(angular){ function HeroDetailController(){ } angular.module('ComponentTestApp') .component('heroDetail',{ templateUrl:'views/heroDetail.html', controller:HeroDetailController, bindings:{ hero:'=' } });})(angular);在heroDetail.js 中 ， 我們聲明 heroDetail 的 component ，這里要注意 在index.html中以橫杠分離展示的標(biāo)簽，在js代碼中需要使用駝峰標(biāo)示展示。其中的 ： bindings 對(duì)象，表示 component 之中通訊的協(xié)議。
現(xiàn)在是頁(yè)面中的展示效果： 
在我們使用 bindings 進(jìn)行數(shù)據(jù)綁定的時(shí)候 ， 官方并不推薦我們使用 “=” 進(jìn)行數(shù)據(jù)綁定， 因?yàn)椤?” 是一種雙向的數(shù)據(jù)綁定，這就意味著我們?cè)?component中去修改 數(shù)據(jù)的時(shí)候，在它的父組件中的值也會(huì)被修改 。 官方推薦我們使用 “< ” 進(jìn)行單向的數(shù)據(jù)綁定，值得注意的是 就算我們使用的是 “<” 因?yàn)樵诟附M件和組件作用域都是引用同一個(gè)對(duì)象的，因此如果要更改組件中的對(duì)象屬性或數(shù)組元素，父組件仍將反映該更改。
OK，介紹完了 數(shù)據(jù)的綁定，那么Component與父組件方法之間的綁定又是如何進(jìn)行的那 ？ 讓我們來(lái)看下面這個(gè)例子
index.html
<!DOCTYPE html><html lang="en" ng-app="ComponentTestApp"><head> <meta charset="UTF-8"> <title>Document</title></head><body ng-controller="MainCtrl as ctrl"> <hero-detail on-log="ctrl.log(text)"></hero-detail> <script src="js/angular.js"></script> <script src="js/index.js"></script> <script src="js/heroDetail.js"></script></body></html>index.js
(function(angular){ angular.module('ComponentTestApp',[]) .controller('MainCtrl',function(){ this.log = function(text){ console.log("輸出的內(nèi)容為： " + text); } });})(angular);heroDetail.html
<input type="text" placeholder="被輸出的內(nèi)容" ng-model="text"><br><button ng-click="onLog()">outputLog</button>heroDetail.js
(function(angular){ function HeroDetailController($scope){ $scope.text = ''; var ctrl = this; $scope.onLog = function(){ ctrl.onLog({text:$scope.text}); } } angular.module('ComponentTestApp') .component('heroDetail',{ templateUrl:'views/heroDetail.html', controller:HeroDetailController, bindings:{ onLog:'&' } });})(angular);在代碼中我們通過(guò) “&” 符號(hào)去綁定了一個(gè)方法 onLog() 該方法接收一個(gè) text 參數(shù) ， 需要注意的是，在參數(shù)進(jìn)行傳遞的時(shí)候，是以json的形式進(jìn)行傳遞的 。 這樣我們?cè)邳c(diǎn)擊 outputLog按鈕的時(shí)候，就會(huì)輸出我們?cè)趇nput中輸入的內(nèi)容。
新聞熱點(diǎn)
疑難解答
圖片精選
