覆盖 mixin 的观察者

Question

正如您在此示例中所看到的，我有一个全局 mixin，其中包含一个value数据和一个针对此数据的观察者：

Vue.mixin({
    data() {
    return {
        value: 'test',
      mixinWatcher: false,
    };
  },
  watch: {
    value: {
        handler() {
        console.log('mixin');
        this.mixinWatcher = true;
      },
        immediate: true,
    },
  },
});

我也有两个组成部分：

• 没有任何观察者的NoMergeComponent 。 我希望这个组件使用默认的观察者；
• 应该覆盖默认观察器的MergeComponent 。

是否可以覆盖 mixin 的观察者，或者我应该找到另一种方法，例如手动删除观察者？

我也认为我可以通过将一个方法绑定到观察者来解决这个问题，并覆盖这个方法而不是整个观察者。

Answer 1

解决方法有效。

我基本上在观察者中调用另一个方法，当我想覆盖这个方法时，我可以简单地让Vue.js进行合并：

这是我的混合：

Vue.mixin({
    data() {
    return {
        value: 'test',
      mixinWatcher: false,
    };
  },
  watch: {
    value: {
        handler() {
        this.valueWatcher();
      },
        immediate: true,
    },
  },
  methods: {
    valueWatcher() {
        console.log('mixin');
      this.mixinWatcher = true;
    }
  },
});

以及需要覆盖观察者方法的组件：

const MergeComponent = {
    template: '#test-component-template',
  methods: {
    valueWatcher() {
        console.log('component');
    },
  },
};

Answer 2

因为我最近遇到了类似的问题，使用类样式组件覆盖组件中 mixin 中定义的观察者。 我正在分享这个对我有用的解决方案。 混合代码：

@Component
export default class MyMixin extends Vue{
    value: string = '';
    @Watch('value')
    onValueChanged(newVal: string, oldVal: string){
        console.log('MIXIN');
    }
}

组件代码：

@Component
export default  class  MyComponent extends Mixins(MyMixin){

    onValueChanged(newVal: string, oldVal: string){
        console.log('COMPONENT');
    }
}

对更改的值运行此代码，控制台中的结果将是：'COMPONENT'。 正如您所看到的，在组件中删除 @Watch 让我达到了我的目标。