1. 父子傳值 props

所有的 props 都是單向往下的，父組件 property 更新會影響子組件的,反過來則不會;另外，每次父組件中對應屬性發(fā)生改變，子組件中的所有 props 都會被更新為最新的值。所以在子組件中，不應該對 props 進行更改

<div id="app">
    <p>{{ message }}</p>
    <input type="text" v-model="message">
    <child :msg="message"></child>
</div>
<template id="child">
    <p>從父組件傳來的msg: {{ msg }}</p>
</template>
<script>
    Vue.component('child', {
        template: '#child',
        props: ['msg']
    })
    new Vue({
        el: '#app',
        data: {
            message: 'hello props'
        }
    })
</script>

在線demo

2. 子組件向父組件傳遞數(shù)據(jù) 自定義事件

使用 v-on
所有Vue實例都實現(xiàn)了Events接口，即： 通過 $on(eventName) 監(jiān)聽事件 ; 通過 $emit(eventName) 觸發(fā)事件

<div id="count">
    <p>{{ total }}</p>
    <count-btn v-on:add="incrementTotal"></count-btn>
    <count-btn v-on:add="incrementTotal"></count-btn>       
</div>
<template id="child">
    <div>
        <button @click="add">{{ count }}</button>
    </div>
</template>
<script>
    Vue.component('count-btn', {
        template: '#child',
        data () {
            return {
                count: 0
            }
        },
        methods: {
            add () {
                this.count++
                this.$emit('add')
            }
        }
    })
    new Vue({
        el: '#count',
        data: {
            total: 0
        },
        methods: {
            incrementTotal () {
                this.total++
            }
        }
    })
</script>

在線demo