使用共享方法/道具扩展传递给Vue组件的数据对象

Question

这是我还在学习的第一个Vue问题。

假设我有一个组件：

Vue.component('list-card', {
props: ['entry'],
computed: {
isArchived: function() { return this.entry.Status == 'Archived' }
},
template: `<div class="card">
<span class="icon" :style="{ opacity: isArchived ? 0.2 : 1 }"></span>
</div>`
});

现在，我想提取方法isArchived，因为我可能有其他类似的组件来渲染卡-网格卡、板卡等……它们都需要不在入口对象中的isArchived。

对我来说，问题是传递给组件的入口对象是一个没有方法或计算属性的POJO纯数据对象。因此，我必须定义组件本身的属性，而不是数据对象。从我的OOP经验来看，这是错误的——条目。IsArchived((或条目。IsArchived道具更有意义。

现在，我可以在将条目对象传递给组件之前，甚至在获取某个存储中的条目时，扩展这个对象。但我不想这样做-1。只有组件应该知道它们是否需要isArchived和2。这会影响性能——组件可能决定不使用isArchived，但我已经计算过了。

那么VueJS解决这个问题的正确方法是什么呢？

Answer 1

正如docs所说，Mixins are a flexible way to distribute reusable functionalities for Vue components，因此您可以使用mixin

// define a mixin object
var myMixin = {
props: ['entry'],
computed: {
isArchived: function() { return this.entry.Status == 'Archived' }
},
}
// define a component that uses this mixin
var Component = Vue.extend({
mixins: [myMixin],
template: `<div class="card">
<span class="icon" :style="{ opacity: isArchived ? 0.2 : 1 }"></span>
</div>`
})
var component = new Component() // => "hello from mixin!"