Vue2中避免组件重复声明数据与方法的最优实现方案

针对你这种两个组件模板不同，但核心数据、方法完全一致，且希望直接通过this访问（不用Props或工具类前缀）的场景，Vue2里有几个原生方案可以解决，按推荐优先级排序：

1. 局部混入（Mixins） #

这是Vue2里最常用的复用方式，完全符合你的需求，不用额外依赖，直接把公共逻辑抽成混入对象，组件引入后就能通过this直接访问所有公共数据和方法。

示例代码： #

首先定义公共混入文件common-address-mixin.js：

export default {
  data() {
    return {
      address: {
        billing: {
          address1: '',
          // 其他公共地址字段
        }
      }
    }
  },
  methods: {
    xyz() {
      // 公共方法逻辑
      console.log('执行公共方法xyz')
    },
    // 其他公共方法
  },
  // 还可以包含computed、watch等其他选项
}

然后在两个业务组件中引入并使用：

<template>
  <!-- 组件A的独有模板 -->
</template>

<script>
import commonAddressMixin from './common-address-mixin.js'

export default {
  mixins: [commonAddressMixin],
  // 组件A的独有逻辑，比如额外的data、methods
  data() {
    return {
      // 组件A独有的数据
    }
  },
  methods: {
    // 组件A独有的方法，如果和混入重名，组件自身的会覆盖混入的
  }
}
</script>

组件B同理，只需要替换模板和独有逻辑即可，直接通过this.address.billing.address1、this.xyz()访问公共内容。

注意：如果组件自身的data/methods和混入重名，组件的内容会覆盖混入的，这点可以用来做个性化扩展。

2. 基础组件继承（Vue.extend） #

如果你的公共逻辑更像"基础能力"，可以用Vue.extend创建一个基础组件，业务组件继承这个基础组件，同样能直接通过this访问公共内容。

示例代码： #

定义基础组件BaseAddressComponent.js：

import Vue from 'vue'

export default Vue.extend({
  data() {
    return {
      address: {
        billing: {
          address1: ''
        }
      }
    }
  },
  methods: {
    xyz() {
      console.log('执行公共方法xyz')
    }
  }
})

业务组件继承基础组件：

<template>
  <!-- 组件A的独有模板 -->
</template>

<script>
import BaseAddressComponent from './BaseAddressComponent.js'

export default {
  extends: BaseAddressComponent,
  // 组件A的独有逻辑，同样支持覆盖基础组件的内容
  data() {
    return {
      // 独有数据
    }
  }
}
</script>

对比混入：继承是单继承关系，逻辑层级更清晰；混入是多混入组合，适合多个独立逻辑片段的复用。如果你的公共逻辑是一套完整的基础能力，用继承更合适。

3. 全局混入（谨慎使用） #

如果你的项目里很多组件都需要这套公共逻辑，可以全局注册混入，但要注意不要滥用，因为全局混入会影响所有Vue组件（包括第三方组件），容易造成命名冲突和逻辑污染。

示例代码： #

在项目入口文件（比如main.js）中注册：

import Vue from 'vue'
import commonAddressMixin from './common-address-mixin.js'

Vue.mixin(commonAddressMixin)

之后所有组件都能直接通过this访问公共数据和方法，无需局部引入。

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