覆盖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数据吗？

这里是一个小提琴：

解决此

https://jsfiddle.net/8v9sfxok/

来源

2017-02-17 matt

如上所述，mixin不能覆盖现有数据。为此，我不得不把我的原始组件作为“基础”组件。然后使用另一个组件中的“扩展”选项来覆盖现有数据。

来源

2017-02-21 18:43:54 matt

的一种方法是在你的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

来源

2017-02-17 20:15:35

从mixins documentations：