Vue: Properties/data 的 mixin 在定义 properties/data 时不可用

Question

我有一个存储信息的 vue mixin（world 在下面的例子中），我想访问几个 vue 组件，而不是每次都显式导入它。

示例如下：

<template>
  <ol>
    <li>Hello {{ world }}</li>
    <li>{{ greeting }}</li>
    <li>{{ greeting2 }}</li>
  </ol>
</template>

<script lang="ts">
import { Component, Mixins, Vue } from 'vue-property-decorator'

@Component
class MyMixin extends Vue {
  world = 'world'
}

@Component
export default class Home extends Mixins(Vue, MyMixin) {
  greeting = 'Hello ' + this.world
  greeting2 = ''

  created() {
    this.greeting2 = 'Hello ' + this.world
  }
}
</script>

页面显示：

1. Hello world
2. Hello undefined
3. Hello world

为什么 2nd 不起作用？这是设计使然吗？有比 3 更好的方法来规避它吗？

Answer 1

这与 mixin 无关，这是类的设计，一个属性在声明中不知道另一个，但您可以将 greeting 定义为计算属性 :

@Component
export default class Home extends Mixins(Vue, MyMixin) {

   greeting2 = ''
   
   get greeting (){
      return 'Hello ' + this.world
    }
  created() {
    this.greeting2 = 'Hello ' + this.world
  }
}

Vue: Properties/data 的 mixin 在定义 properties/data 时不可用

Vue: Properties/data of mixin is not available when defining properties/data

typescript

vue.js

mixins

vue-mixin

vue-property-decorator