摘要：父組件的數(shù)據(jù)需要通過(guò)才能下發(fā)到子組件中。這是為了防止子組件無(wú)意間修改了父組件的狀態(tài)，來(lái)避免應(yīng)用的數(shù)據(jù)流變得難以理解。另外，每次父組件更新時(shí)，子組件的所有都會(huì)更新為最新值。

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

有結(jié)構(gòu)HTML

有樣式CSS

有交互（效果）

行為

信號(hào)量存數(shù)據(jù)

組件的行為可以定制？通過(guò)屬性設(shè)置
在Vue中有什么樣的組件(組件進(jìn)行分類)：
  實(shí)現(xiàn)基本功能的基礎(chǔ)的組件（最小的元素）
  可復(fù)用的邏輯組件（業(yè)務(wù)組件）
  頁(yè)面組件
頁(yè)面上所有的東西全都是組件：形成了組件樹

你不必把每個(gè)組件都注冊(cè)到全局。你可以通過(guò)某個(gè) Vue 實(shí)例/組件的實(shí)例選項(xiàng) components 注冊(cè)僅在其作用域中可用的組件：

//在html中是使用

var Child = {
  template: "
A custom component!
"
}
var vm = new Vue({
  el: "#app",
  components: {
    // Child 將只在父組件模板中可用
    Child
  }
})

這種封裝也適用于其它可注冊(cè)的 Vue 功能，比如指令。

頁(yè)面上所有的東西全都是組件：形成了組件樹

// 頭部組件
var AppHead = {
    template: `
app head
`
};
// 主窗口單元組件
var AppMainUnit = {
    template: `
app main unit
`
}
// 主窗口組件
var AppMain = {
    template: `
app main
    
    
    
`,
    components: {
        AppMainUnit
    }
}
// 側(cè)邊欄單元組件
var AppSideUnit = {
    template: `
app side unit
`
}
// 側(cè)邊欄組件
var AppSide = {
    template: `
app side
    
    
    
    
`,
    comp
onents: {
        AppSideUnit
    }
}
// 根組件        
var vm = new Vue({
    el: "#app",
    components: {
        AppHead,
        AppMain,
        AppSide
    }
})

子組件與根組件的data用法不同

根組件data：

var vm = new Vue({
    el: "#app",
    data: {
        msg: ""
    },
    components: {
        MyLi
    }
})

{{msg}}
調(diào)用其中的msg

子組件data：

var MyLi = {
//那么 Vue 會(huì)停止運(yùn)行，并在控制臺(tái)發(fā)出警告，告訴你在組件實(shí)例中 data 必須是一個(gè)函數(shù)。
    data() {
        console.log(1);
        return {
            counter: 0
        }
    },
    template: `{{counter}}`
}
//根組件
var vm = new Vue({
    el: "#app",
    data: {
        msg: "123"
    },
    components: {
        MyLi
    }
})




輸出結(jié)果：0 0 0

組件實(shí)例的作用域是孤立的。這意味著不能 (也不應(yīng)該) 在子組件的模板內(nèi)直接引用父組件的數(shù)據(jù)。父組件的數(shù)據(jù)需要通過(guò) prop 才能下發(fā)到子組件中。

var Child = {
    template: `{{message}}{{myMessage}}`,
//聲明當(dāng)前組件內(nèi)部能夠接受一個(gè)message的屬性，如果是駝峰式命名，在傳遞參數(shù)時(shí)使用小寫，
    props: ["message","myMessage"]
}
var vm = new Vue({
    el: "#app",
    data: {
        parentMessage:"h"
    },
    components: {
        Child
    }
})

在html中使用：

//父組件賦值到子組件

//實(shí)時(shí)同步的pareMessage值

Prop 是單向綁定的：當(dāng)父組件的屬性變化時(shí)，將傳導(dǎo)給子組件，但是反過(guò)來(lái)不會(huì)。這是為了防止子組件無(wú)意間修改了父組件的狀態(tài)，來(lái)避免應(yīng)用的數(shù)據(jù)流變得難以理解。
另外，每次父組件更新時(shí)，子組件的所有 prop 都會(huì)更新為最新值。這意味著你不應(yīng)該在子組件內(nèi)部改變 prop。如果你這么做了，Vue 會(huì)在控制臺(tái)給出警告。
在兩種情況下，我們很容易忍不住想去修改 prop 中數(shù)據(jù)：

Prop 作為初始值傳入后，子組件想把它當(dāng)作局部數(shù)據(jù)來(lái)用；

Prop 作為原始數(shù)據(jù)傳入，由子組件處理成其它數(shù)據(jù)輸出。

var Child = {
    template: `
{{initCounter}} {{childCounter}}
`,
    props:["initCounter"],
    data(){
//保存初始值到childCounter并返回，發(fā)生變化的是當(dāng)前的childCounter的值
        return {childCounter: this.initCounter}
    }
}
var vm = new Vue({
    el: "#app",
    data: {
        counter: 0
    },
    components:{
        Child
    }
})

在html中調(diào)用：

注意在 JavaScript 中對(duì)象和數(shù)組是引用類型，指向同一個(gè)內(nèi)存空間，如果 prop 是一個(gè)對(duì)象或數(shù)組，在子組件內(nèi)部改變它會(huì)影響父組件的狀態(tài)。

var Child = {
    template: `
{{size}} {{normalSize}}
`,
    props: ["size"],
    computed: {
        normalSize(){
            return this.size.trim().toLowerCase();
        }
    }
}
var vm = new Vue({
    el: "#app",
    data:{
        parentSize: " THREE"
    },
    components:{
        Child
    }
})

在html中調(diào)用：

我們可以為組件的 prop 指定驗(yàn)證規(guī)則。如果傳入的數(shù)據(jù)不符合要求，Vue 會(huì)發(fā)出警告。這對(duì)于開發(fā)給他人使用的組件非常有用。

要指定驗(yàn)證規(guī)則，需要用對(duì)象的形式來(lái)定義 prop，而不能用字符串?dāng)?shù)組：

var Child = {
    template: `
{{pa}} {{pb}} {{pc}} {{pd}} {{pe}} {{pf}}
`,
    props: {
        pa: Number,
        pb: [String, Number],
        pc: {
            type: Number,
            required: true//必填
        },
        pd: {
            type: Number,
            default: 100//默認(rèn)值
        },
        pe: {
            type: Object,
            default: function(){
                return {
                    hello : "world"
                }
            }
        },
        pf: {
            type: Number,
            validator: function(v){
                return v > 100
            }//自定義屬性判斷
        }
    }
}

var vm = new Vue({
    el: "#app",
    data:{
        pa: 2,
        pb: "abc",
        pc: 2,
        pd: 50,
        pe: {},
        pf: 120
    },
    components:{
        Child
    }
})

在html中使用：

String

Number

Boolean

Function

Object

Array

Symbol

type 也可以是一個(gè)自定義構(gòu)造器函數(shù)，使用 instanceof 檢測(cè)。
當(dāng) prop 驗(yàn)證失敗，Vue 會(huì)拋出警告 (如果使用的是開發(fā)版本)。注意 prop 會(huì)在組件實(shí)例創(chuàng)建之前進(jìn)行校驗(yàn)，所以在 default 或 validator 函數(shù)里，諸如 data、computed 或 methods 等實(shí)例屬性還無(wú)法使用。