Vue父子组件插槽渲染异常与props传值错误排查修复

开发者阿泽

2026-7-13

错误排查与修复方案

核心错误点

按钮禁用属性错误：子组件用自定义的disabilityState控制按钮禁用，这不是Vue原生支持的按钮禁用属性，正确属性应为disabled
Props配置冲突：子组件Props同时设置required: true和default，必填属性不需要默认值，二者冲突
父组件Slot用法倒置：父组件错误地用v-slot包裹子组件，实际应该在子组件标签内部定义插槽内容
Props传递名称不匹配：父组件传递的disabilityState与子组件接收的isDigitizePolygonBtnDisabled属性名不一致
冗余代码：子组件setup中返回的digitizePolygonBtnDisabilityState未被使用，可删除

修复后的子组件（DigitizePolygonButton.vue）

<template>
  <button 
    id="idDigitizePolygonBtn" 
    class="clsDigitizePolygonBtn" 
    :disabled="isDigitizePolygonBtnDisabled"
  >
    <slot name="slotDigitizePolygonBtnLabel">text</slot>
  </button>
</template>

<script>
export default {
  props: {
    isDigitizePolygonBtnDisabled: {
      type: Boolean,
      required: false, // 若允许父组件不传此值则设为false；若必填则删除default
      default: false
    }
  }
};
</script>

修复后的父组件

<template>
  <!-- 直接使用子组件，传递正确的Props -->
  <DigitizePolygonButton :isDigitizePolygonBtnDisabled="false">
    <!-- 在子组件内部定义插槽内容 -->
    <template #slotDigitizePolygonBtnLabel>
      test
    </template>
  </DigitizePolygonButton>
</template>

<script>
// 务必导入子组件
import DigitizePolygonButton from './DigitizePolygonButton.vue';

export default {
  components: {
    DigitizePolygonButton
  }
};
</script>