1. 因为我父组件表单的验证规则也会根据这个值发生变化,所以就写了一个计算属性
const isDeclaration = computed(() => {
if (state.info.isCustomsType) {
return true
}
return false
})
//这里只放一条验证规则演示就行
transportMethod: [{ required: isDeclaration, message: '', trigger: ['blur', 'change'] },],
2. 子组件我是直接把这个计算属性通过 props 传递过去了
3. 出现的问题:直接定义 rules 的值 ,无法监听到 父组件中 isDeclaration 值的变化
const rules = reactive<FormRules<RuleForm>>({
exportCompany: [
{ required: props.isDeclaration, message: '', trigger: 'blur' },
],
4. 解决办法 : 定义的 rules 使用 computed 计算属性 return 出去
const computedRules = computed(() => {
return {
exportCompany: [
{ required: props.isDeclaration, message: '', trigger: ["blur", "change"] },
],}
这样就可以了