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

Question

MyMixin.vue has the method beginEdit .

What I'm trying to do is to make onFirstLineClick to call myMixin's beginEdit depending on the value of this.folded .

When I console logged myMixin.beginEdit , it is undefined and not surprisingly myMixin.beginEdit() doesn't work.

Am I missing something needed to use the function? If so, why does beginEdit work perfectly on <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

The great thing about mixin is that when a component uses a mixin, all options in the mixin will be "mixed" into the component's own options. Which means that inside your component you can call mixin method directly like:

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

That is also the reason why you can use beginEdit() method on <span> directly like:

<span @click="beginEdit" />

Please also know that in future if you declare a method in this component with same name as mixin method name beginEdit , then the component's method will take priority and you might see different behaviour. So, make sure to give unique names to mixin methods.