Vue3如何条件化禁用组件按钮？输入字符不足3时禁用TodoButton

问题根源 #

当前代码无法实现禁用效果的核心原因有两个：

• TodoButton子组件没有接收父组件传递的disabled属性，也未将其应用到内部的原生<button>元素上
• 父组件中@click="createTodo()"的写法会导致页面初始化时立即执行一次createTodo方法，而非点击时触发

修复步骤 #

1. 修改TodoButton子组件，接收并应用disabled属性

子组件需要通过defineProps声明接收disabled属性，然后将其绑定到内部的按钮上：

<script setup>
// 声明接收disabled属性，类型为布尔值，默认false
const props = defineProps({
  disabled: {
    type: Boolean,
    default: false
  }
})
</script>
<template>
  <div>
    <!-- 将props中的disabled绑定到原生button -->
    <button :disabled="props.disabled">
      <slot></slot>
    </button>   
  </div>
</template>

2. 调整父组件的事件绑定与错误提示逻辑

修正点击事件的绑定方式，并优化输入长度不足时的错误提示：

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

const todoState = reactive({
  todo: "",
  invalid: false,
  errorMsg: ""
})

const emit = defineEmits(["create-todo"])
const createTodo = () => {
    // 检查输入长度是否符合要求
    if(todoState.todo.length >= 3){
        todoState.invalid = false;
        emit("create-todo", todoState.todo)
        todoState.todo = ""
        return
    }
    todoState.invalid = true
    // 根据输入长度给出对应提示
    todoState.errorMsg = todoState.todo.length === 0 
      ? "Todo value can not be empty" 
      : "Todo must be at least 3 characters long"
}
</script>

<template>
    <div class="input-wrap" :class="{ 'input-err' : todoState.invalid}">
        <input type="text" v-model="todoState.todo"/>
        <!-- 修正click绑定为方法名，避免立即执行 -->
        <TodoButton @click="createTodo" :disabled="todoState.todo.length < 3">Create</TodoButton>
    </div>
    <p>{{ todoState.todo }}</p>
    <p v-show="todoState.invalid" class="err-msg">{{ todoState.errorMsg }}</p>
</template>

关键改动说明 #

• 子组件通过defineProps接收外部传递的disabled属性，并绑定到原生按钮，实现禁用状态的传递
• 父组件将@click="createTodo()"改为@click="createTodo"，确保只有点击按钮时才触发方法
• 更新createTodo方法的判断逻辑，将长度校验从非空改为至少3个字符，并给出更精准的错误提示

内容的提问来源于stack exchange，提问作者Espresso