如何从另一个组件调用 mixin function？

Question

MyMixin.vue有方法beginEdit 。

我要做的是让onFirstLineClick根据this.folded beginEdit

当我在控制台登录myMixin.beginEdit时，它是undefined的，毫不奇怪myMixin.beginEdit()不起作用。

我是否缺少使用 function 所需的东西？ 如果是这样，为什么beginEdit在<span>上完美运行？

<template>
  <div>
    <div>
      <div
        @click="onFirstLineClick"
      />
      <span
        @click="beginEdit"
      />
  </div>
</template>

<script>
import myMixin from './MyMixin';

export default {
  name: 'currComponent',
  mixins: [myMixin],
  data() {
    return {
      folded: false,
    };
  },
  methods: {
    onFirstLineClick(e) {
      // myMixin.beginEdit() doesn't work
    }
  },
};
</script>

Answer 1

mixin的伟大之处在于，当组件使用 mixin 时，mixin 中的所有选项都会“混合”到组件自己的选项中。 这意味着在您的组件内部，您可以直接调用mixin方法，例如：

methods: {
  onFirstLineClick(e) {
    this.beginEdit()
  }
},

这也是您可以直接在<span>上使用beginEdit()方法的原因，例如：

<span @click="beginEdit" />

另请注意，将来如果您在此组件中声明一个与mixin方法名称beginEdit的方法，则该组件的方法将优先，您可能会看到不同的行为。 因此，请确保为mixin方法提供唯一的名称。