在理解入門全局組件和局部組件之前，我們有必要了解什么是“組件化”的概念。

十多年的長海網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對一服務(wù)，響應(yīng)快，48小時及時工作處理。全網(wǎng)整合營銷推廣的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動調(diào)整長海建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。成都創(chuàng)新互聯(lián)公司從事“長海網(wǎng)站設(shè)計(jì)”,“長海網(wǎng)站推廣”以來，每個客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

組件化可以理解為頁面的一個組件或者一個部分，例如下圖，紅框部分可以劃分成一個組件，我們只需要寫好一個組件，然后循環(huán)數(shù)據(jù)即可。這個組件可能在在首頁、列表頁等任何地方使用，并不僅僅局限于當(dāng)前頁面。

我們?nèi)匀灰宰詈唵蔚膖odolist入門Vue的全局組件和局部組件。我們把

拿出來作為一個組件，那么我們分別看看全局組件和局部組件分別如何實(shí)現(xiàn)。

全局組件

        

            
            提交
        
        


            
        
    

    

我們使用Vue.component()來定義一個全局組件，那么這個組件在當(dāng)前頁面均可使用，而不僅僅是id="root"中。

Vue.component("TodoItem",{
            props:['content'],
            template:"
{{content}}
"
        })

TodoItem是組件名稱，在html中使用

props是接收參數(shù)

template定義組件樣式，或者通俗說模板

同時還需要注意這里有一個父組件向子組件傳值：

todo-item v-bind:content="item" v-for="item in list">

我們來分析，list是輸入父組件的，todo-item屬于子組件，list中循環(huán)的數(shù)據(jù)item需要傳遞給全局組件，則用v-bind:content="item"傳遞，其中content就是子組件接收的數(shù)據(jù)，那么子組件定義接收props:['content']后，就可以template:"

{{content}}

"用content顯示數(shù)據(jù)了。

局部組件

同樣的效果，我們使用局部組件來試試。

        

            
            提交
        
        

            
        
    

    

和全局組件不同的是，我們通過var TodoItem={}定義局部組件，定義后還要在new Vue中進(jìn)行聲明

components:{
   'TodoItem':TodoItem
},

那么局部組件僅僅在id="root"中使用。

好了，
新聞標(biāo)題：Vue入門：todolist實(shí)例帶你入門全局組件和局部組件
URL網(wǎng)址：http://weahome.cn/article/cpgsic.html