首先定义要混淆的类:
// @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>
结论:
- 属性可以混入
- 函数可以混入
- 同名属性无法混入,会报错
- 混入文件必须为ts文件