Question

我正在使用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/

Answer 1

解决此问题的一种方法是在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

Answer 2

来自mixins documentations：

期望对象值的选项...将合并到同一个宾语。 组件的选项将优先考虑这些对象中存在冲突的密钥

（强调我的）。

如果您需要其他合并策略you can define one。

Answer 3

正如一些人所提到的，mixins无法覆盖现有数据。为此，我不得不采取我原来的组件，并使其成为＆＃34;基地＆＃34;零件。然后使用＆＃34; extends＆＃34;另一个组件中的选项可覆盖现有数据。

在vue中覆盖数据

3 个答案: