在 vue 中覆盖数据

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 数据？

这是一个fiddle:

https://jsfiddle.net/8v9sfxok/

Answer 1

解决此问题的一种方法是在您的混入中创建一个方法并从您的模板中调用它：

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：

Options that expect object values ... will be merged into the same object. The component’s options will take priority when there are conflicting keys in these objects

（强调我的）。

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

Answer 3

正如一些人提到的，mixin 不能覆盖现有数据。为此，我必须使用我的原始组件并将其设为 "base" 组件。然后在另一个组件中使用 "extends" 选项覆盖现有数据。

在 vue 中覆盖数据

Override data in vue

javascript

mixins

vue.js

vuejs2