vue+antd查询，父按钮验证子时间控件

Question

项目需求，时间三级联动控件是子控件，表单和按钮在父组件中，点击查询按钮，需要验证子控件中的“年”是否有值，如果没有选，需要提示选择年，如果有值，就正常查询，这个功能该如何实现，因为刚接触Vue,找了几个例子，但是都不成功。

子控件

  <div id="pointDate">
    <a-select class="year select" v-model="yearsModel" v-on:change="dateChange(1)" placeholder="年" style="width: 117px;">
      <a-select-option v-for="item in years" :key="item.value" :label="item.label" :value="item.value">
        {{item.label}}
      </a-select-option>
    </a-select>
    <span class="spacer">-</span>
    <a-select class="month select" v-model="monthsModel" v-on:change="dateChange(2)" placeholder="月" style="width:100px;">
      <a-select-option v-for="item in months" :key="item.value" :label="item.label" :value="item.value">
        {{item.label}}
      </a-select-option>
    </a-select>
    <span class="spacer">-</span>
    <a-select class="day select" v-model="daysModel" v-on:change="dateChange(3)" placeholder="日" style="width:100px;">
      <a-select-option v-for="item in days" :key="item.value" :label="item.label" :value="item.value">
        {{item.label}}
      </a-select-option>
    </a-select>
  </div>

父级

                <a-form class="ant-advanced-search-form" layout="inline">
                  <a-row :gutter="24" class="screenRow">
                    <a-col :span="24" style="padding-bottom: 8px;">
                      <a-form-item label="按时间段选择">
                        <a-range-picker
                          id="setDate"
                          format="YYYY-MM-DD"
                          :placeholder="['开始日期', '结束日期']"
                          @change='setDate'
                          :value='setDateValue'
                          :allowClear='false'
                        />
                      </a-form-item>
                    </a-col>
                    <a-col :span="20">
                      <a-form-item label="按时间点选择">
                        <dateSelect 
                          id="pointDate"
                          ref="pointDateRef"
                          v-on:listenToChildEvent="dateChange"
                        />
                      </a-form-item>
                    </a-col>
                    <a-col :span="4" :style="{textAlign: 'right'}">
                      <a-button type="primary" @click='timeGetList(1)'>
                        查询
                      </a-button>
                    </a-col>
                  </a-row>
                </a-form>

请问这种情况该如何做验证？

Answer 1

点击按钮子 父 通信

Vue 组件间通信六种方式（完整版）_张飞鹏的博客-CSDN博客_vue 组件之间传值几种方式 前言组件是 vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。一般来说，组件可以有以下几种关系：如上图所示，A 和 B、B 和 C、B 和 D 都是父子关系，C 和 D 是兄弟关系，A 和 C 是隔代关系（可能隔多代）。针对不同的使用场景，如何选择行之有效的通信方式？这是我们所要探讨的主题。本文总结了vue组件间通信的几种方式，如pr... https://blog.csdn.net/weixin_43460372/article/details/90600137