覆盖vue中的数据
问题描述：
我正在使用mixin来添加和覆盖vue数据。我能够添加新数据，但似乎无法覆盖现有数据。下面是简单的代码：覆盖vue中的数据
var mixin = {
data: function() {
return {
foo: 'boo',
test: 'blah'
}
}
}
var vm = new Vue({
el: '#vue-instance',
mixins: [mixin],
data: function() {
return {
foo: 'bar'
}
}
});
当我运行它，“测试”等于“嗒嗒”正常，但“富”仍然等于“吧”。无论如何，除了添加新数据之外，还有一个mixin覆盖现有的vue数据吗？
这里是一个小提琴：
解决此
答
如上所述，mixin不能覆盖现有数据。为此，我不得不把我的原始组件作为“基础”组件。然后使用另一个组件中的“扩展”选项来覆盖现有数据。
答
的一种方法是在你的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'
}
}
});