覆盖vue中的数据答案

【问题标题】：Override data in vue覆盖vue中的数据
【发布时间】：2017-02-17 18:05:19
【问题描述】：

我正在使用 mixin 来添加和覆盖 vue 数据。我可以添加新数据，但似乎无法覆盖现有数据。这是简单的代码：

var mixin = {
    data: function() {
    return {
      foo: 'boo',
      test: 'blah'
    }
  }
}

var vm = new Vue({
  el: '#vue-instance',
  mixins: [mixin],
  data: function() {
    return {
      foo: 'bar'
    }
  }
});

当我运行它时，'test' 正确地等于 'blah'，但 'foo' 仍然等于 'bar'。除了添加新数据之外，是否还有一个 mixin 覆盖现有的 vue 数据？

这是一个小提琴：

https://jsfiddle.net/8v9sfxok/

【问题讨论】：

标签： javascript vue.js mixins vuejs2

【解决方案1】：

来自mixins documentations：

期望对象值的选项...将被合并到相同的目的。 组件的选项在有这些对象中的键冲突

（强调我的）。

如果您想要不同的合并策略，you can define one。

【讨论】：

【解决方案2】：

解决这个问题的一种方法是在你的 mixin 中创建一个方法并从你的模板中调用它：

html：

<div id="vue-instance">
  <p>
  {{getFoo()}}
  </p>
  <p>
  {{test}}
  </p>
</div>

JavaScript：

var mixin = {
    data: function() {
    return {
      foo: 'baz',
      test: 'blah'
    }
  },
  methods: {
    getFoo: function () {
        return 'baz';
    }
  }
}

var vm = new Vue({
  el: '#vue-instance',
  mixins: [mixin],
  data: function() {
    return {
      foo: 'bar'
    }
  }
});

JSFiddle

【讨论】：

【解决方案3】：

正如一些人所提到的，mixin 不能覆盖现有数据。为此，我必须使用我的原始组件并将其作为“基础”组件。然后在另一个组件中使用“扩展”选项来覆盖现有数据。

【讨论】：