vue组件间通信

随着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);

在父组件中：

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

可以看到我们用@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