Vue.js-資料-組件化思想 —上

1、Vue中的組件

 

Vue視圖層的靈魂 —  組件化

組件（Component）是 Vue.js 最強大的功能之一；

 

組件能夠擴展 HTML 元素，封裝可重用的代碼；

 

在較高層面上，組件是自定義元素， Vue.js 的編譯器爲它添加特殊功能。在有些狀況下，組件也能夠是原生 HTML 元素的形式，以 is 特性擴展。

 

2、全局組件的建立和註冊

 

 

案例代碼：

 

 

調用Vue.extend()建立的是一個組件構造器，構造器有一個選項對象，選項對象的template屬性用於定義組件要渲染的HTML；

  

調用Vue.component()註冊組件時，須要提供2個參數：組件的標籤名 和 組件構造器；註冊的組件要掛載到某個Vue實例下，不然它不會生效；

  

Vue.extend() 和 Vue.component()：因爲 Vue 自己是一個構造函數，Vue.extend() 是一個類繼承方法，它用來建立一個 Vue 的子類並返回其構造函數;

  

而Vue.component() 的做用在於：創建指定的構造函數與 ID 字符串間的關係，從而讓 Vue.js 能在模板中使用它；直接向 Vue.component() 傳遞 options 時，它會在內部調用 Vue.extend()。

 

3、局部組件的建立和註冊

 

案例代碼:

 

 

 

運行結果：

 

 

 

4、另外一種組件建立和註冊方式

 

直接經過Vue.component註冊或獲取全局組件，主要體如今如下幾種方式：

 

// 註冊組件，傳入一個擴展過的構造器

Vue.component('my-component', Vue.extend({ /* ... */ }))

 

// 註冊組件，傳入一個選項對象（自動調用 Vue.extend）

Vue.component('my-component', { /* ... */ })

 

// 獲取註冊的組件（始終返回構造器）

var MyComponent = Vue.component('my-component') 

 

4.1  自定義全局組件

 

 

 

4.2  自定義局部組件

 

5、父子組件

 

      組件意味着協同工做，一般父子組件會是這樣的關係：組件 A 在它的模版中使用了組件 B 。

 

最簡單的父子組件：

 

 

運行結果：

 

 

在父子組件組合使用中要注意如下一些問題：

 

沒有實例化的子組件不能拿出來單獨使用！

 

<div id="app">

       <parent-component></parent-component>

       <child-component></child-component>

</div>

 

 

在父標籤內部嵌套子標籤！

 

 

<div id="app">

       <parent-component>

           <child-component></child-component>

       </parent-component>

</div>

 

        由於在父標籤一旦生成真實的DOM，其內部的子標籤就會被解析成爲普通的HTML標籤來執行，並且<child-component>不是標準的HTML標籤，會被瀏覽器過濾掉。

 

6、在組件上綁定Class和Style

       數據綁定一個常見需求是操做元素的 class 列表和它的內聯樣式。由於它們都是屬性 ，咱們能夠用v-bind 處理它們：只須要計算出表達式最終的字符串。

        並且，把 v-bind 用於 class 和 style 時，表達式的結果類型除了字符串以外，還能夠是對象或數組。

 

案例代碼：

 

 

7、template和script標籤

 

       儘管在上面組件的組件註冊的方式已經很簡單，可是在template選項中拼接HTML的標籤仍是不符合常規的編程習慣，並且HTML元素和js代碼混雜在一塊兒形成了很大的耦合性。

 

 

       那麼，template和script標籤能夠幫助咱們將定義在JS中的HTML模板分離出來。

 

注意： 兩種註冊方式效果同樣，官方建議用第一種。

 

（1）使用template標籤註冊組件：

 

 

（2）使用script標籤註冊組件：

 

 

注意：使用<script>標籤時，type指定爲text/x-template，意在告訴瀏覽器這不是一段js腳本，瀏覽器在解析HTML文檔時會忽略<script>標籤內定義的內容。

 

 

8、掛載選項data必須是函數

 

        使用組件時，大多數能夠傳入到 Vue 構造器中的選項能夠在 Vue.extend() 或Vue.component()中註冊組件時使用，但有一個重要前提： data 必須是函數。

 

下面代碼會出現的問題：

 

 

代碼運行結果： 

 

 

正確的寫法：

 

 Vue.component('my-component', {

        template: '#myTemplate',

        data: function () {

            return {

                message: '你好,中國'

            }

        }

    })

 

代碼運行結果：

 

 

 注意：若是data選項指向某個對象，這意味着全部的組件實例共用一個data。

咱們應當使用一個函數做爲 data 選項，讓這個函數返回一個新對象。

 

 

 

運行結果，這三個組件共享了同一個 data ， 所以增長一個 counter 會影響全部組件！

 

 

 

解決辦法：爲每一個組件返回新的 data 對象來解決這個問題！

 

data: function () {

            return {

                counter: 0

            }

        }

 

運行結果：