VUE里父组件与子组件的交互操作

       在开发vue前端项目时，经常会遇到父组件与子组件之间的相互操作，比如有时候父组件需要知道子组件的触发事件，以便对这个触发事件进行响应，同时附组件也要传递数据给子组件等等

  一、子组件给父组件触发事件与传送数据

    在Vue.js中如果子组件需要给父组件传送数据，需要在子组件中定义一个自定义事件，事件名称不需要加括号。在子组件中通过$emit触发自定义事件，父组件使用v-on来监听事件。将需要传递的参数通过emit的第二个参数传递的。$emit方法的语法是:

    vm.$emit(eventName,[...args])
eventName是事件名，args是附加参数，这些参数回会传给监听器的回调函数。如果子事件需要向父组件传递数据，就可以通过第二个参数来传。

二、父组件传送数据给子组件

1.定义父组件
    1）父组件想要向子组件传值时，那么需要在子组件引入的地方绑定一个属性，属性值就是要传的数据，并且要在父组件中引入子组件。

    2）这个自定义属性的属性值是用来存放父组件向子组件传递的数据。

    3）在这里，如isAdd即是要传的数据，需要在data定义，所以当传递的数据时字符串类型时，可以在data定义为 isAdd:true

2.定义子组件
1）子组件使用props属性接收父组件传递过来的值。

写法是：

 props:{
    父组件自定义的属性：该值的类型，
    required:true
 }
三、实战例子

       需求是在出库单里增加子表单数据的数据的时候需要检测是否已经选择了仓库，否则提示先选择仓库，而且忽略增加子表单数据。

      1、子组件给父组件触发事件与传送数据

       因为在ErpSaleOutForm.vue里调用了下面子组件，同时绑定了一个beforeAdd事件

<!-- 子表单区域 -->
    <a-tabs v-model="activeKey" @change="handleChangeTabs">
      <a-tab-pane tab="销售出库单明细" :key="refKeys[0]" :forceRender="true">
        <nbcio-editable-table
          :ref="refKeys[0]"
          v-on:beforeAdd="beforeAdd"
          :isAdd="isAdd"
          :loading="erpSaleOutDetailTable.loading"
          :columns="erpSaleOutDetailTable.columns"
          :dataSource="erpSaleOutDetailTable.dataSource"
          :maxHeight="300"
          :disabled="formDisabled"
          :rowNumber="true"
          :rowSelection="true"
          :actionButton="true"/>
      </a-tab-pane>
    </a-tabs>

在props里增加下面数据

// 是否可以增加行数据
      isAdd: {
        type: Boolean,
        default: true
      },

同时在新增加子表单数据修改如下：

handleClickAdd() {
        this.$emit('beforeAdd')
        if (this.isAdd) {
          let {addRowNum, addIndex, addScrollToBottom} = this.settings
          if (addIndex <= 0) {
            this.add(addRowNum, addScrollToBottom)
          } else {
            this.insert(addIndex, addRowNum, addScrollToBottom)
          }
        }
      },

上面增加了一个给父组件this.$emit('beforeAdd')  这里没有数据传送，以后需要可以增加

2、父组件传送数据给子组件

beforeAdd() {
       console.log("beforeAdd this.param.sc_id=",this.param.sc_id)
       if (this.param.sc_id==='') {
         this.$message.error('请先选择仓库！')
         this.isAdd = false
         return
       }
     },

在父组件ErpSaleOutForm.vue里增加上面的方法。

四、效果图