1.創建自定義組件inputNumber .vue文件,先實現編寫組件內部內容。
2.父組件調用
2.1使用import引入自定義子組件 import inputNumber from '../components/inputNumber';
2.2.將當前組件定義爲父組件的子組件。
使用components{
inputNumber:inputNumber
}
2.3以標籤形式調用子組件<inputNumber />
3.調用組件的時候，一半都需要設置組件的一些初始值（也就是組件需要暴露出參數接口的意思，要不然成了死的組件了）
3.1 基本傳值（組件通訊 props down方式）：
3.1.1例如父組件向子組件傳初始值num=5；
3.1.1父組件傳值 <imputNumber num='5'/>
3.1.2 子組件接值 props:['num'],然後組件內部使用v-bind：value='num' 來進行綁定
3.1.3 num值如何改變 子組件不能改變num值，因爲數據單向流動，所有num 的值改變需要子組件傳遞給父組件，父組件再來改變，然後影響到子組件的方式來改變。使用 this.$emit('numChange',value)的方式，發佈一個自定義事件numChange,然後父組件使用子組件的時候，註冊這個事件。然後再這個事件中來改變 num。<imputNumber num='5' @numChange='numChange'/>
numChange(num){
this.num=num;
}
3.2 v-model方式來實現組件通許
v-model 一般用於表單元素，
3.2.1 當v-model用於組件的時候，實際上相當於v-bind:value='num' 和 v-on:input的組合簡寫。默認向下傳遞一個名字是value的props數據，默認監聽組件內部的input事件，然後修改綁定的數據。所以子組件發佈事件的時候，使用this.$emit('input',value)，這樣父組件就可以監聽到input事件了
父組件調用子組件的時候，<inputNum v-model='num'/>