Vue中如何将重复HTML代码拆分为可复用组件并正确导入使用？

我看了你的代码，发现组件没法正常工作主要是几个核心问题没处理到位——组件里依赖了大量外部数据和方法，但你既没把它们传递到组件内部，也没在组件里定义这些方法，另外props的处理也不够严谨。下面一步步帮你修正：

1. 梳理组件依赖，补充必要的Props #

你的组件模板里用到了attributes、locationIds、weatherIds、radiuses、locations这些变量，但这些都没在组件的props里声明，组件根本拿不到这些数据，肯定会报错。首先要把所有外部依赖都通过props传入，同时加上类型验证和默认值避免空值问题：

<script>
export default {
  name: 'Conditions',
  props: {
    rules: {
      type: Array,
      required: true,
      default: () => []
    },
    attributes: {
      type: Array,
      required: true,
      default: () => []
    },
    locationIds: {
      type: Array,
      required: true,
      default: () => []
    },
    weatherIds: {
      type: Array,
      required: true,
      default: () => []
    },
    radiuses: {
      type: Array,
      required: true,
      default: () => []
    },
    locations: {
      type: Array,
      required: true,
      default: () => []
    },
    days: {
      type: Array,
      required: true,
      default: () => []
    },
    form: {
      type: Object,
      required: true
    }
  },
  // ...后续代码
}
</script>

2. 处理组件内部缺失的方法 #

模板里用到了changeAttribute、changeOperator、removeRuleDetail这些方法，但你的组件script里只写了onClick。因为rules是父组件维护的状态，推荐用事件触发的方式让父组件处理逻辑（避免子组件直接修改父组件数据）：

<script>
export default {
  // ...props部分
  methods: {
    changeAttribute(index, attributeId) {
      this.$emit('change-attribute', index, attributeId)
    },
    changeOperator(index, attributeId, operatorId) {
      this.$emit('change-operator', index, attributeId, operatorId)
    },
    removeRuleDetail(index) {
      this.$emit('remove-rule-detail', index)
    },
    getLocations(value, attributeId) {
      this.$emit('get-locations', value, attributeId)
    },
    getLocationsBasedOnValue(search, attributeId) {
      this.$emit('get-locations-based-on-value', search, attributeId)
    },
    selectLocation(index, value) {
      this.$emit('select-location', index, value)
    }
  }
}
</script>

3. 父组件正确注册并使用组件 #

父组件里不仅要传递rules，还要传递所有补充的props，同时监听组件触发的事件来处理对应逻辑，别忘了注册组件：

<template>
  <!-- 第一次调用组件 -->
  <Conditions 
    :rules="selectedRuleConditions"
    :attributes="attributes"
    :location-ids="locationIds"
    :weather-ids="weatherIds"
    :radiuses="radiuses"
    :locations="locations"
    :days="days"
    :form="form"
    @change-attribute="handleChangeAttribute"
    @change-operator="handleChangeOperator"
    @remove-rule-detail="handleRemoveRuleDetail"
    @get-locations="handleGetLocations"
    @get-locations-based-on-value="handleGetLocationsBasedOnValue"
    @select-location="handleSelectLocation"
  />
  
  <!-- 第二次到第八次调用，替换对应的rules数组即可 -->
  <Conditions 
    :rules="secondRuleConditions"
    :attributes="attributes"
    :location-ids="locationIds"
    <!-- 其他props和事件监听同上 -->
  />
</template>

<script>
import Conditions from '../../../components/rules/conditions'

export default {
  components: {
    Conditions // 必须注册组件才能使用
  },
  data() {
    return {
      selectedRuleConditions: [],
      secondRuleConditions: [],
      // ...其他需要传递的数组/对象数据
      attributes: [],
      locationIds: [],
      weatherIds: [],
      radiuses: [],
      locations: [],
      days: [],
      form: { /* 你的表单规则数据 */ }
    }
  },
  methods: {
    handleChangeAttribute(index, attributeId) {
      // 父组件处理属性变更的逻辑
    },
    handleChangeOperator(index, attributeId, operatorId) {
      // 父组件处理操作符变更的逻辑
    },
    handleRemoveRuleDetail(index) {
      // 父组件移除规则详情的逻辑
    },
    // ...其他事件处理方法
  }
}
</script>

额外优化建议 #

• 如果多个Conditions组件用到的公共数据（比如attributes、locationIds）是相同的，可以用provide/inject或者Vuex来传递，避免重复写props；
• 组件内v-for的key尽量用规则的唯一ID（比如rule.id），而不是index，避免列表更新时出现渲染异常；
• 可以给组件添加v-if来控制渲染时机，确保数据加载完成后再渲染组件。

内容的提问来源于stack exchange，提问作者code-8