Vue 3使用PrimeVue Checkbox点击无法正常勾选取消问题求助

算力阿峰

2026-10-5

问题原因

PrimeVue Checkbox 是受控组件，必须绑定响应式状态才能响应交互更新选中状态，你当前的代码没有为组件绑定任何状态值，因此点击后没有对应的状态变更触发视图更新。

修复方案

方案1：子组件内部维护状态（仅子组件内部使用选中值时使用）

直接修改FormElement组件代码如下：

<template>
  <div>
    <Checkbox v-model="checked" />
  </div>
</template>
<script lang="ts">
import Checkbox from "primevue/checkbox"
import { defineComponent } from "vue"
export default defineComponent({
  name: "FormElement",
  components: { Checkbox },
  // 新增响应式状态存储选中值
  data() {
    return {
      checked: false
    }
  }
})
</script>

方案2：支持父组件双向绑定（需要父组件获取/控制选中值时使用）

第一步：修改FormElement组件，支持v-model传入

<template>
  <div>
    <Checkbox :modelValue="modelValue" @update:modelValue="$emit('update:modelValue', $event)" />
  </div>
</template>
<script lang="ts">
import Checkbox from "primevue/checkbox"
import { defineComponent } from "vue"
export default defineComponent({
  name: "FormElement",
  components: { Checkbox },
  props: {
    modelValue: {
      type: Boolean,
      default: false
    }
  },
  emits: ['update:modelValue']
})
</script>

第二步：父组件使用时绑定状态

<template>
  <div class="test">
    <FormElement v-model="formChecked" />
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue"
import FormElement from "@/components/FormElement/FormElement.vue"

export default defineComponent({
  name: "Home",
  components: {
    FormElement,
  },
  data() {
    return {
      formChecked: false
    }
  }
})
</script>

注意事项