如何在带有 nuxt-属性-decortor 的 Nuxt.js 应用中使用 mixins
How to use mixins in Nuxt.js app with nuxt-property-decortor
我在最近的项目中使用了Nuxt.js,语言是TypeScript。
另外,我正在使用 nuxt-property-decorator
。
我试图理解以下代码中的 'mixins' 属性。
mixins.vue↓
<template>
<div>
<p>{{hello}}</p>
</div>
</template>
<script lang="ts">
import { Component ,Vue } from 'nuxt-property-decorator'
import Mixin from "~/mixins/mixin";
@Component({
mixins:[
Mixin
]
})
export default class extends Vue{
greeting:string = 'Hello'
}
</script>
mixin.ts↓
import { Vue } from "nuxt-property-decorator";
export default class extends Vue {
greeting:string = ''
message:string = 'world'
get hello(){
return this.greeting + ' ' + this.message + '!'
}
}
我期望输出中有 "Hello worlds!"
,但发生错误:
Property or method "hello" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.
谁能告诉我吗?
mixin 必须用 @Component
:
修饰
// mixin.ts
import { Component, Vue } from "nuxt-property-decorator";
@Component
export default class extends Vue {
//...
}
我在最近的项目中使用了Nuxt.js,语言是TypeScript。
另外,我正在使用 nuxt-property-decorator
。
我试图理解以下代码中的 'mixins' 属性。
mixins.vue↓
<template>
<div>
<p>{{hello}}</p>
</div>
</template>
<script lang="ts">
import { Component ,Vue } from 'nuxt-property-decorator'
import Mixin from "~/mixins/mixin";
@Component({
mixins:[
Mixin
]
})
export default class extends Vue{
greeting:string = 'Hello'
}
</script>
mixin.ts↓
import { Vue } from "nuxt-property-decorator";
export default class extends Vue {
greeting:string = ''
message:string = 'world'
get hello(){
return this.greeting + ' ' + this.message + '!'
}
}
我期望输出中有 "Hello worlds!"
,但发生错误:
Property or method "hello" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.
谁能告诉我吗?
mixin 必须用 @Component
:
// mixin.ts
import { Component, Vue } from "nuxt-property-decorator";
@Component
export default class extends Vue {
//...
}