vue.js - VueJS 使用 Mixin 数据初始化 Vue 属性

Question

Mixin 数据似乎无法用于初始化组件数据。

在下面的小提琴中，App 正在使用 MyMixin。mixinMessage 在 created() 钩子中可用，但在数据初始化中不可用。我究竟做错了什么？

https://jsfiddle.net/rb81qp5a/2/

const { default: Component, Mixins } = VueClassComponent

@Component()
class MyMixin extends Vue {
  mixinMessage = 'mixin message'
}

@Component({
  template: `
  <div>
    <h1>Message 1: {{ message1 }}</h1>
    <h1>Message 2: {{ message2 }}</h1>
    </div>
  `,
  mixins: [MyMixin]
})
class App extends Vue {
  message1 = this.mixinMessage
  message2 = ''

  created() {
    this.message2 = this.mixinMessage
  }
}

new Vue({
  el: '#app',
  render: h => h(App)
})

没有 vue-class-component 的示例： https ://codepen.io/anon/pen/PLdmWE

• Mixin 属性 (init) 为空，但应为“Mixin 属性”
• Mixin 属性（已创建）如预期的那样是“Mixin 属性”

标签： vue.jsmixins