ref, unref, reactive in vue3

If you want to get a child component’s data, you use reference: 

Here I use element-plus as the UI library. And the code below may not work since it’s just a demo for demonstrating the concept of how can you work with vue3

# js
import {
  defineComponent,
  reactive,
  onMounted,
  ref,
  unref,
} from 'vue'

export default defineComponent({
  name: 'YourParentComponent',
  props: {
  },
  components: {
  },
  setup: (props) => {
    const offlineForm = ref(null) as any

    onMounted(async () => {
    })

    const dict = reactive({
        theInput: ""
    })

    const rules = {
      data: {
        theInput: [
          { validator: (rule: any, value: string, callback: any): boolean => { return !isNaN(Number(value)) }, trigger: 'blur', message:'只能输入数字' }
        ]
      }
    }

    const offlineAgreeButton = async () => {
      if (unref(offlineForm)?.validate) {
        try {
          await unref(offlineForm)?.validate()
        } catch (e) {
          ElMessage('请检查下您是否有没填或填错的内容')
          return
        }
      }
    }

    return {
      dict,
      props,
      rules,
      offlineForm,
      offlineAgreeButton
    }
  }
})

#html
<el-form ref="offlineForm" :model="dict" :rules="rules">
        <el-row :gutter="20" class="row">
          <el-col :offset="0" :span="5">
            <el-form-item label="过关批号：" prop="data.theInput" label-width="200">
              <el-input
                class="target-other"
                v-model="dict.theInput"
                placeholder="请输入清关号码"
              />
            </el-form-item>
          </el-col>
          <el-col :offset="0" :span="5">
            <el-form-item label="" label-width="0">
              <el-button @click="offlineAgreeButton">Default</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

​