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

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

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

有樣式CSS

有交互（效果）

行為

信號量存數(shù)據(jù)

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

你不必把每個組件都注冊到全局。你可以通過某個 Vue 實例/組件的實例選項 components 注冊僅在其作用域中可用的組件：

//在html中是使用

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

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

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

// 頭部組件
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 會停止運(yùn)行，并在控制臺發(fā)出警告，告訴你在組件實例中 data 必須是一個函數(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

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

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

在html中使用：

//父組件賦值到子組件

//實時同步的pareMessage值

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

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

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 中對象和數(shù)組是引用類型，指向同一個內(nèi)存空間，如果 prop 是一個對象或數(shù)組，在子組件內(nèi)部改變它會影響父組件的狀態(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 指定驗證規(guī)則。如果傳入的數(shù)據(jù)不符合要求，Vue 會發(fā)出警告。這對于開發(fā)給他人使用的組件非常有用。

要指定驗證規(guī)則，需要用對象的形式來定義 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òu)造器函數(shù)，使用 instanceof 檢測。
當(dāng) prop 驗證失敗，Vue 會拋出警告 (如果使用的是開發(fā)版本)。注意 prop 會在組件實例創(chuàng)建之前進(jìn)行校驗，所以在 default 或 validator 函數(shù)里，諸如 data、computed 或 methods 等實例屬性還無法使用。