一、父組件向子組件傳遞信息

1. 利用props（這種比較基礎(chǔ)，就不細(xì)寫了）

// 父組件：
<template>
    <div>
        <child :message="message"></child>
    </div>
</template>
<script>
import child from 'child.js'

export default {
    components: {
        child
    },
    data() {
      return {
        message: 'message'
      }
    }
}
</script>


// 子組件：
<template>
    <div>
        {{ message }}
    </div>
</template>
<script>
export default {
    name: 'child',
    props: {
        message: {
            type: String
        }
    }
}
</script>

2. 利用refs API
   首先來看看refs是什么，官方給出的描述:一個對象，持有注冊過 ref attribute 的所有 DOM 元素和組件實例，也就是說只要我們給子組件注冊ref屬性，之后便可以通過refs這個API獲得到子組件的DOM元素和Vue組件實例，也就可以調(diào)用子組件的方法。

// 父組件：
<template>
    <div>
        <child ref="child"></child>
        <button @click="clear()">Clear</button>
    </div>
</template>
<script>
import child from 'child.js'

export default {
    components: {
        child
    },
    method: {
        clear() {
            this.$refs.clear();
        }
    }
}
</script>

// 子組件：
<template>
    <div>
        {{ message }}
    </div>
</template>
<script>
export default {
    name: 'child',
    data() {
      return {
        message: 'message'
      }
    },
    methods: {
        clear() {
            this.message = '';
        }
    }
}
</script>

二、子組件向父組件傳遞信息

回想我們在開發(fā)中，用element-ui、iview等這類組件時，數(shù)據(jù)是如何“綁定”到組件上的？v-model。

1. $emit API
   首先還是來看看官方的說明emit，觸發(fā)當(dāng)前實例上的事件。附加參數(shù)都會傳給監(jiān)聽器回調(diào)，然后在父組件里使用v-on監(jiān)聽處理這個事件。

   Vue.component('welcome-button', {
     template: `
       <button v-on:click="$emit('welcome')">
         Click me to be welcomed
       </button>
     `
   })
   
   <div id="emit-example-simple">
     <welcome-button v-on:welcome="sayHi"></welcome-button>
   </div>
   
   new Vue({
     el: '#emit-example-simple',
     methods: {
       sayHi: function () {
         alert('Hi!')
       }
     }
   })
   

2. v-model
   v-model本質(zhì)上是一個語法糖，它包含一個prop和一個event，默認(rèn)這個prop是value、event是input，先來看看下面的例子：

   // 子組件
   <template>
       <input :value="value" @input="handleInput" @change="handleChange"/>
   </template>
   
   <script>
   export default {
       name: 'Input',
       props: {
           value: [String, Number],
       },
       methods: {
           handleInput(event) {
               this.$emit('input', event.target.value);
           },
           handleChange(event) {
               this.$emit('input', event.target.value);
           },
       }
   }
   </script>
   
   // 父組件
   <Input v-model="value"/>
   
   <script>
   export default {
       data() {
           return {
               value: ''
           }
           }
       }
   }
   </script>
   

   子組件就是一個簡單的input框，使用v-on監(jiān)聽綁定input和change事件（均為原生事件），在其value發(fā)生變化時調(diào)用this.$emit('input', event.target.value);，告訴父組件“我這里發(fā)生了input事件，我的value已經(jīng)改變了，現(xiàn)在的值是event.target.value”，而在父組件上只要對input事件進(jìn)行監(jiān)聽和處理即可，v-model其實就是在監(jiān)聽到input事件的時候，將子組件中的value prop賦值給綁定的參數(shù)。
   再來看看官方的例子：

   Vue.component('base-checkbox', {
     model: {
       prop: 'checked',
       event: 'change'
     },
     props: {
       checked: Boolean
     },
     template: `
       <input
         type="checkbox"
         v-bind:checked="checked"
         v-on:change="$emit('change', $event.target.checked)"
       >
     `
   })
   
   <base-checkbox v-model="lovingVue"></base-checkbox>
   

   最開始這個lovingVue的值會傳給子組件的chekced變量，而當(dāng)checked的值發(fā)生改變之后就會觸發(fā)input的change事件（這里的change是HTML input原生的事件），進(jìn)而調(diào)用v-on:change綁定的$emit('change', $event.target.checked)將事件傳遞給父組件，同時把改變后的值一并傳過去，所以
   <base-checkbox v-model="lovingVue"></base-checkbox>
   其實就等同于

   <base-checkbox v-bind:checked="lovingVue" v-on:change="changeValue"></base-checkbox>
   
   <script>
   export default {
       data() {
         return {
             lovingVue: true
         }
       },
       methods: {
           changeVlaue(value) {
               this.lovingVue = value;
           }
       }
   }
   </script>