Question

正如您在this example中看到的那样，我有一个全球混音，其中包含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

The workaround works.

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

这是我的混音：

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

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

<xsl:template match="comment()">
    <xsl:copy>
      <xsl:apply-templates/>
    </xsl:copy>
  </xsl:template>

  <xsl:template match="*">
    <!-- remove element prefix -->
    <xsl:element name="{local-name()}">
      <!-- process attributes -->
      <xsl:for-each select="@*">
        <!-- remove attribute prefix -->
        <xsl:attribute name="{local-name()}">
          <xsl:value-of select="."/>
        </xsl:attribute>
      </xsl:for-each>
      <xsl:apply-templates/>
    </xsl:element>
  </xsl:template>

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使我达到了目标。

覆盖mixin的观察者

2 个答案: