Vue清空子组件数据问题

简述：在父组件中使用子组件中所提供的数据，在触发事件后，要求清空子组件所遗留的数据

如图所示：

        

 红框：子组件         绿框：父组件

 技术栈：ElementUI + Vue2

子组件代码：

<template>
<el-form-item label="车牌号:" prop="car_no">
    <el-input placeholder="请输入内容" v-model.trim="upper_suff" @blur="sendCarno">
       <el-select v-model="province" slot="prepend" placeholder="请选择" style="width: 100px;">
          <el-option v-for="item in prov_abbrev" :key="item.key" :label="item.value" :value="item.value"></el-option>
            </el-select>
        </el-input>
    </el-form-item>
</template>

export default {
    name: 'provinceSelect',
    data() {
        return {
            car_no: '', //车牌号
            prov_abbrev: [], //下拉框数据
            province: '', // 车牌号 前缀
            suffix: '' // 车牌号 后缀
        };
    },
    created() {
        this.province_data();
    },
    computed: {
        // 大写转换
        upper_suff: {
            get() {
                return this.suffix;
            },
            set(val) {
                this.suffix = val.toUpperCase();
            }
        }
    },
    methods: {
        // 车牌号
        province_data() {
            var keyJC = ['京','津','黑', ];
            this.prov_abbrev = keyJC.map((item, index) => ({ key: index, value: item }));
        },
        // 数据字段拼接
        info_splic() {
            this.car_no = this.province + this.suffix;
        },
        //触发自定义事件
        sendCarno() {
            this.info_splic();
            this.$emit('getCarno', this.car_no);
        },
        // 重置数据
        reset_data() {
            (this.province = ''), (this.suffix = '');
        }
    }
};
</script>

<style></style>

父组件代码块：

//template 
//provinceSelect 为组件名称
<provinceSelect @getCarno="getprovince_data" ref="reset"></provinceSelect>


//methods
// 表单提交验证
submit_add() {
   this.$refs.add_from.validate(valid => {
      if (valid) {
         this.addNewinfo();
          this.$refs.reset.reset_data(); //清除子组件数据
      }
    });
},

解决方法：在子组件中绑定ref，通过触发    this.$refs.绑定属性名称.子组件事件    调用子组件中的清空数据事件来达到要求

如有不对，欢迎指正！