Vue.js混入问题：如何在混入方法中操作数据成员？

1. 先排查变量名拼写问题 #

错误提示明确显示Property 'ads1Code' does not exist，而你的混入data返回的是ad1Code（少了s）——这是最直接的问题：变量名拼写不一致。把data里的变量名统一成ads1Code、ads2Code、ads3Code、adsMobileCode，和mounted里访问的名字完全对应即可解决基础错误。

2. TypeScript类型声明修正 #

如果拼写无误仍报错，是因为Vue混入在TS环境下需要明确类型声明，让TS识别混入内的data属性。以下是几种可行方案：

方式一：扩展全局组件类型 #

在项目src/types/vue.d.ts文件（无则新建）中添加类型声明，让TS全局识别这些属性：

import { ComponentCustomProperties } from 'vue'

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    ads1Code: string
    ads2Code: string
    ads3Code: string
    adsMobileCode: string
  }
}

方式二：给this添加类型断言 #

在mounted钩子中访问this时，用类型断言明确实例包含混入的data属性：

const adComponentMixin = {
  data() {
    return {
      ads1Code: '',
      ads2Code: '',
      ads3Code: '',
      adsMobileCode: ''
    }
  },
  mounted() {
    const self = this as typeof adComponentMixin['data'] & typeof this
    self.ads1Code = '你的广告代码1'
    self.ads2Code = '你的广告代码2'
    // 其他属性赋值
  }
}

方式三：用defineComponent包裹混入 #

借助Vue官方的defineComponent工具定义混入，让TS自动推导类型：

import { defineComponent } from 'vue'

const adComponentMixin = defineComponent({
  data() {
    return {
      ads1Code: '',
      ads2Code: '',
      ads3Code: '',
      adsMobileCode: ''
    }
  },
  mounted() {
    this.ads1Code = '你的广告代码1'
    // 此时TS可正确识别this上的混入属性
  }
})

3. 额外验证 #

确保使用混入的组件没有覆盖这些data属性，否则也会导致TS类型识别异常。

内容的提问来源于stack exchange，提问作者Samuele B.