父向子通訊

1. 傳遞：自定義屬性（屬性名任意，屬性值為要傳遞的資料）
2. 接收子元件通過props接收父元件屬性

示例程式碼

<div id="app">
    <h1>打個招呼：</h1>
    <!--使用子元件，同時傳遞title屬性-->
    <introduce title="大家好，我是鋒哥"/>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    Vue.component("introduce",{
        // 直接使用props接收到的屬性來渲染頁面
        template:'<h1>{{title}}</h1>',
        props:['title'] // 通過props來接收一個父元件傳遞的屬性，props只能是物件或陣列
    })
    var app = new Vue({
        el:"#app"
    })
</script>
 

靜態繫結

給 prop 傳入一個靜態的值： 只能是字串型別

<introduce title="大家好，我是AA"/>

動態繫結

給 prop 傳入一個動態的值： （通過v-bind從資料模型中，獲取title的值）

<introduce :title="title"/>

props資料校驗

當無需資料校驗時props可以寫為陣列，需要資料校驗時需要寫為物件。

//陣列形式
props:['title']

//物件形式
props: {
     items: {    //屬性名
           type: Array,  //屬性資料型別
           default
 
: [],  //屬性預設值
           required: true   //屬性是否必須
     }
}

當 prop 驗證失敗的時候，(開發環境構建版本的) Vue 將會產生一個控制檯的警告。

props中可以用於資料校驗的型別有:String、Number、Boolean、Array、Object、Date、funcation、Symbol

子向父通訊

子元件向父元件通訊需要通過呼叫父元件的函式間接實現對data的影響。vue提供了一個內建的this.$emit()函式，用來呼叫父元件繫結的函式。

在父元件中編寫操作父data的函式

var app = new Vue({
    el:
 
"#app",
    data:{
        num:0
    },
    methods:{ // 父元件中定義操作num的方法
        increment(){
            this.num++;
        },
        decrement(){
            this.num--;
        }
    }
})

把函式繫結到子元件標籤上

<div id="app">
    <h2>num: {{num}}</h2>
    <counter :count="num" @inc="increment" @dec="decrement"></counter>
</div>

在子元件中編寫子元件函式通過this.$emit()函式呼叫父元件的函式

 　　Vue.component("counter", {
            template:'\
                <div>\
                    <button @click="plus">加</button>  \
                    <button @click="reduce">減</button>  \
                </div>',
            props:['count'],
            methods:{
                plus(){
　　　　　　　　　　　　//this.$emit("inc",x1,....,x3)；其中inc為繫結在子元件標籤上的自定義函式名，x1....x3依次為父元件函式所需要的引數
                    this.$emit("inc");
                },
                reduce(){
                    this.$emit("dec");
                }
            }
        })