VueJS 可重用的观察者

Question

我在data中有一个分页对象，如下所示：

pagination: {
page: 1,
limit: 10,
from: 1,
to: this.limit,
total: null
}

我在创建的每个列表中都使用此对象。有一个组件，处理分页的东西，我将这个pagination对象作为v-model传递。我在父组件中为此pagination对象创建了一个观察程序，并且必须在每个列表中重写此观察程序。有没有办法只写一次这个观察程序并在我想去的任何地方使用它？

这是观察者：

watch: {
pagination: {
handler () {
if (this.pagination.page > this.totalPages) {
this.pagination.page = this.totalPages
}
this.getFields()
},
deep: true
}
}

Answer 1

使用mixin

mixin 可以像 vue 组件一样运行，您可以像这样将其包含在您想要的每个组件中 -

var mixin = {
data: function () {
return {
pagination: {
page: 1,
limit: 10,
from: 1,
to: this.limit,
total: null
}
}
}
}
new Vue({
mixins: [mixin],
data: function () {
return {
pagination: {
page: 2
}
}
},
created: function () {
console.log(this.pagination.limit)
// 10 -> takes from the mixin
console.log(this.pagination.page)
// 2 -> takes from the current component as it overrides the mixin
}
})

同样，您可以在混合中使用您的观察器！ 在这里查看

希望对您有所帮助！！