Vue2 代码优化：如何重用相同但复杂的 HTML 内容

在 Vue2 项目中，如果你遇到在一个 Vue 文件里有三段相同但比较复杂的 HTML 内容，只是根据不同状态渲染，其中有包含 Vue 的语法，`v-if` 等等。那么，你可以使用 Vue 的组件来重用这三段复杂的 HTML 内容，并根据不同的状态进行渲染。

首先，将这三段复杂的 HTML 内容放入一个单独的组件文件中，例如 `ComplexHTML.vue`。

在 `ComplexHTML.vue` 组件中，你可以使用 Vue 的 prop 来接收不同的状态值。例如，你可以定义一个名为 `status` 的 prop 来表示不同的状态。然后在模板中使用 `v-if` 指令根据状态值来渲染不同的内容。示例代码如下：

<template>
  <div>
    <div v-if="status === 'status1'">
      <!-- 复杂HTML内容1 -->
    </div>
    <div v-else-if="status === 'status2'">
      <!-- 复杂HTML内容2 -->
    </div>
    <div v-else>
      <!-- 复杂HTML内容3 -->
    </div>
  </div>
</template>

<script>
export default {
  props: {
    status: {
      type: String,
      required: true
    }
  }
}
</script>

然后，在你的主 Vue 组件中，使用 `` 来引入这个复杂 HTML 的组件，并将不同的状态值传递给它。示例代码如下：

<template>
  <div>
    <!-- 其他内容 -->
    <complex-html :status="currentStatus"></complex-html>
    <!-- 其他内容 -->
  </div>
</template>

<script>
import ComplexHTML from './ComplexHTML.vue'

export default {
  components: {
    ComplexHTML
  },
  data() {
    return {
      currentStatus: 'status1' // 根据需要设置不同的状态值
    }
  }
}
</script>

这样，你就可以将这三段复杂的 HTML 内容抽出来，并且根据不同的状态进行渲染，从而减少了代码冗余。