vue项目setup开发过程中的一些问题--组件嵌套，没有触发校验规则的问题说明

遇到的问题：

改变值的操作是在本组件下的子组件， 校验规则，是由本组件的父组件传递过来的， 导致子组件修改值时，没有按预期触发校验规则。

问题说明：

遇到的问题是 Vue 中父子组件之间数据同步和表单校验的时机问题。通常，父组件通过 v-model 或 props 将值传递到子组件，而子组件通过事件（如 emit）通知父组件值的更新。如果校验规则在父组件中定义，而值在子组件中更改且同步存在延迟，就会导致校验滞后的现象。

要实现子组件值变化时立即触发父组件的校验规则，可以采取以下几种方法。

1. 使用 $refs 直接触发父组件的校验 当子组件值变化时，通过$emit 通知父组件，父组件监听事件并直接调用表单的 $refs 来触发校验。

父组件

<template>
  <el-form ref="formRef" :model="form" :rules="rules">
    <child-component v-model="form.name" @value-changed="triggerValidation('name')"></child-component>
  </el-form>
</template>

<script setup>
import { ref, reactive } from 'vue';
import ChildComponent from './ChildComponent.vue';

const form = reactive({
  name: '',
});

const rules = {
  name: [{ required: true, message: '请输入名字', trigger: 'blur' }],
};

const triggerValidation = (field) => {
  const formRef = ref(null);
  formRef.value?.validateField(field);
};
</script>

子组件

<template>
  <input v-model="value" @input="handleInput" />
</template>

<script setup>
import { ref, watch } from 'vue';

const props = defineProps({
  modelValue: String,
});

const emit = defineEmits(['update:value', 'value-changed']);

const value = ref(props.modelValue);

watch(value, (newValue) => {
  emit('value-changed', newValue); // 通知父组件值变化
});

const handleInput = (event) => {
   emits("update:value", value);
};

</script>