隨著vue等框架盛行，元件開發已然成為一種趨勢，元件開發中我們經常遇到的就是父子元件通訊了。下面簡單介紹下vue中父子元件如何通訊：

一、使用props傳遞資料

元件例項的作用域是孤立的。這意味著不能 (也不應該) 在子元件的模板內直接引用父元件的資料。要讓子元件使用父元件的資料，我們需要通過子元件的 props 選項。
子元件要顯式地用 props 選項宣告它期待獲得的資料：

<template>
  <input class="el-input-money" :value="currentValue" @blur="handleBlur" @focus="handleFocus"
 
 @input="handleInput" @change.native='true' :disabled="disabled" :size="size" :max="max" :min="min" :decimalPlaces="decimalPlaces" :placeholder="placeholder" ref="input"></input>
</template>
<script>

export default {
  props: {
    max: {
      type: [Number, Function],
      default
 
: Infinity,
    },
    min: {
      type: [Number, Function],
      default: -Infinity,
    },
    value: {
      type: [Number, String],
      default: '0.00',
    },
    decimalPlaces: {
      type: Number,
      default: 2,
    },
    placeholder: String,
    disabled: Boolean,
    size: String,
  }
  }
  }
  
 
</script>

父元件中我們可以這樣向如上子元件傳遞資料

<v-moneyInput v-model='hwData.A3' :decimalPlaces="4" ref='A3'></v-moneyInput>

這樣我們就將4傳遞到子元件中了。

二、事件通訊

還有一種常用的通訊手段便是通過事件了。
1、子元件通知父元件
- 使用 on(eventName)監聽事件使用−emit(eventName) 觸發事件
在子元件中，我們可以通過emit觸發事件，在父組件用on來監聽。
比如在子元件某個方法中：

this.$emit('deleteFileEvt',fileKey);

在父元件中：

<v-fileupload :params='item' @completeUploadEvt='saveFbzlxxWithoutImageData' @deleteFileEvt='deleteFile' :useDefaultTitle='false' :uploadAddr="'/api/dzzl/upload?filepath=/'" :ref='item.fbzl_dm'></v-fileupload>

可以看到我們用@deleteFileEvt=’deleteFile’監聽了deleteFileEvt事件，deleteFile函式處理：

deleteFile(fileKey) {
      let self = this;
      this.saveFileArr.map((index, item) => {
        if (item == fileKey) {
          self.saveFileArr.splice(index, 1);
          return false;
        }
      })
    }

2、父元件呼叫子元件方法
說完了子元件通知父元件，自然也有父元件需要呼叫子元件方法的時候：

<v-moneyInput v-model='hwData.A2' ref='A2'></v-moneyInput>

如上是父元件中的子元件，通過給一個ref屬性，然後我們可以在父元件的方法中通過this.refs.A2.childMethod()呼叫子元件的childMethod方法。

三、非父子元件通訊

非父子元件通訊的需求我們可能也會遇到，但我還沒遇到過。可以參考vue官網非父子元件通訊
還有一種通訊手段就是我們的vuex
vuex的用法請參考官網vuex