Vue Typescript mixins 混入

首先定义要混淆的类：

// @FilePath: \hello-typescript\src\mixins\GreetingWords.ts
import Vue from 'vue'
import Component from 'vue-class-component'

@Component
export default class MyMixins extends Vue {
    // data
    // 通过混入的方式将属性赋值给其他组件
    mixinVal = 'Hello My Old Friend'
    // 测试 私有属性是否可以混入
    private mixinPrivate = '混入私有属性'
    // 测试方法是否可以混入
    mixinsCount = 0
    // 测试同名属性取值问题
    // count = 10

    // methods
    public getMixinsCount () {
      return this.mixinsCount++
    }
}

然后在其他组件中使用：

<template>
  <div>
    <h1>{{ mixinVal }}</h1>
    <!--证实私有属性可以混入-->
    <span>For Test whether private properties can be mixed: {{mixinPrivate}} </span><br/>
    <button @click="getCount">{{computedCount}}</button><br/>
    <!--证实方法可以混入-->
    <button @click="getMixinsCount">检测混入方法：{{mixinsCount}}</button>
  </div>
</template>
<script lang="ts">
import { Component, Watch } from 'vue-property-decorator'
import { mixins } from 'vue-class-component'
import GreetingWords from '@/mixins/GreetingWords.ts'
@Component
export default class ForMixins extends mixins(GreetingWords) {
  // data
  private count = 0 // 同名属性混入会报错
  public counts = 0
  protected counting = 0

  // methods
  public getCount () {
    return this.count++
  }

  // computed
  // computed检测的属性也是data属性，也属于成员变量
  get computedCount () {
    return this.count + this.mixinsCount
  }

  // watch 实现属性监听
  @Watch('count', { immediate: false, deep: false })
  onCountValueChange (val: number, oldValue: number) {
    if (val !== oldValue) {
      window.console.log('count number => ', val)
    }
  }

  mounted () {
    window.console.log('MixinsVal => ', this.mixinVal)
  }
}
</script>

结论：

1. 属性可以混入
2. 函数可以混入
3. 同名属性无法混入，会报错
4. 混入文件必须为ts文件