(五) 父子组件结合$emit $on $refs设置重置按钮

一、$emit
1、this $emit（‘自定义时间名’,要传送的数据）；
2、触发当前实例上的时间，要传递的数据会传给监听器；

二、$ on
1、VM.$on{(}^{\prime }事件{名}^{\prime },callback)--------------------callback回调$emit要传送的数据FF1B
2、监听当前实例上自定义时间；

父组件：重置按钮

<template>
<common-form class="search-form" ref="thisSearchForm" :model="models"  :forms='forms'>
        <Button type="default" @click="resetForm" v-show="formBtns.reset" >重置</Button>
    </common-form>
</template>
script>
import format from '@/plugins/format.js'
export default {
	methods: {
		resetForm () {
           this.$refs.thisSearchForm.$emit('resetCommonForm')//获取ref为thisSearchForm的节点，触发此子组件的'resetCommonForm'事件
		}
	}
}
</script>

此common-form子组件：

<template>
    <Form
        ref="myCommonForninline"
        :model="forms"
        :rules="ruleValidate"
        :label-width="model.labelWidth?model.labelWidth:90"
        class="my-common-form">
>
</templaste>
<script>
export default {
  name: 'commonForm',
  props: {
    model: {
      type: Object,
      default () {
        return {
          labelWidth: 90,
          data: []
        }
      }
    },
    forms: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  mounted () {
    this.$on('resetCommonForm', function () {//定义'resetCommonForm'函数，触发function里面的函数（将ref绑定为myCommonForninline的内容重置）
      this.$refs.myCommonForninline.resetFields()
    })
  },
}
</script>