Vue.js 数据不能用属性值初始化答案

【问题标题】：Vue.js data can not be initialized with property valuesVue.js 数据不能用属性值初始化
【发布时间】：2018-05-20 19:05:49
【问题描述】：

应该可以直接引用数据值中的属性。但由于某种原因 in 不起作用。我创建了一个小例子：

https://jsfiddle.net/ay7fue0s/

作为一种解决方法，我现在正在这样做：

computed: {
    foo() {
        this.whyDoesNotWork = this.message;
    }
},
watch: {
    foo() {}
}

所以计算函数直接改变数据。非常hacky，可能是错误的。有谁知道仅引用属性的初始示例有什么问题？

【问题讨论】：

不要使用箭头函数返回您的数据（Vue 组件上下文随之丢失）：data() { return { whyDoesNotWork: this.message } }
fixed fiddle
我自己不会注意到的！非常感谢！

标签： vuejs2

【解决方案1】：

Vue.component('child', {
  props: ['message'],
  data() {
    return {
        whyDoesNotWork: this.message
    }   
  },
  template: '<span>{{ whyDoesNotWork }}</span>'
})

var app = new Vue({
  el: '#app',
  data: {
    hello: {},
    message: 'someting'
  },
  components:['child'],
  template: '<child :message="message"></child>'
})

不要在实例属性或回调上使用箭头函数，因为箭头函数不会将 this 绑定到您为其定义计算属性的 vue 实例。

【讨论】：