vue避免父组件的表单校验触发子组件的输入框

可以通过在子组件中使用`v-model`指令，并将父组件的表单校验状态作为`v-model`的绑定值，来避免父组件的表单校验触发子组件的输入框。具体步骤如下：

1. 在父组件中定义表单校验状态，并将其作为`v-model`的绑定值传递给子组件。
2. 在子组件中使用`v-model`指令绑定输入框的值，并将其绑定到子组件的数据属性上。
3. 在子组件中使用`watch`监听父组件传递的表单校验状态，当表单校验状态发生变化时，根据需要进行相应的处理。

下面是一个示例代码：

<!-- 父组件 -->
<template>
 <div>
    <form>
      <child-component v-model="formValid"></child-component>
      <button @click="validateForm">校验表单</button>
    </form>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      formValid: false
    };
  },
  methods: {
    validateForm() {
      // 校验表单逻辑
    }
  }
};
</script>

<!-- 子组件 -->
<template>
 <div>
    <input v-model="inputValue" type="text">
  </div>
</template>

<script>
export default {
  props: ['value'],
  data() {
    return {
      inputValue: ''
    };
  },
  watch: {
    value(newValue) {
      // 根据父组件传递的表单校验状态进行相应的处理
    }
  }
};
</script>

在上述示例中，父组件通过`v-model`将表单校验状态`formValid`传递给子组件，并在子组件中使用`watch`监听`value`属性的变化。当父组件的表单校验状态发生变化时，子组件可以根据需要进行相应的处理，例如禁用输入框或显示错误提示信息。