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

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

有結構HTML

有樣式CSS

有交互（效果）

行為

信號量存數據

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

你不必把每個組件都注冊到全局。你可以通過某個 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
    }
}
// 側邊欄單元組件
var AppSideUnit = {
    template: `
app side unit
`
}
// 側邊欄組件
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}}
調用其中的msg

子組件data：

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




輸出結果：0 0 0

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

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

在html中使用：

//父組件賦值到子組件

//實時同步的pareMessage值

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

Prop 作為初始值傳入后，子組件想把它當作局部數據來用；

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

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

在html中調用：

注意在 JavaScript 中對象和數組是引用類型，指向同一個內存空間，如果 prop 是一個對象或數組，在子組件內部改變它會影響父組件的狀態。

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中調用：

我們可以為組件的 prop 指定驗證規則。如果傳入的數據不符合要求，Vue 會發出警告。這對于開發給他人使用的組件非常有用。

要指定驗證規則，需要用對象的形式來定義 prop，而不能用字符串數組：

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//默認值
        },
        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 也可以是一個自定義構造器函數，使用 instanceof 檢測。
當 prop 驗證失敗，Vue 會拋出警告 (如果使用的是開發版本)。注意 prop 會在組件實例創建之前進行校驗，所以在 default 或 validator 函數里，諸如 data、computed 或 methods 等實例屬性還無法使用。