VueJS Mixins Methods Direct Call

问题

I'm testing Mixins on VueJS and I have a question. Is there a way to call an event directly from a Mixins without having to assign it in my methods?

MyMixins.js

import Vue from 'vue'

Vue.mixin({
    methods: {
        Alerta(){
            alert('WORK!')
        }
    }
})

app.vue

<template>
   <button v-on:click="AlertaInterno">test</button>
</template>
<script>
   export default{
         methods:{
            AlertaInterno(){
            this.Alerta()
         }
      }
   }
</script>

The code above works. I was wondering how I could invoke the mixin function directly, something like this:

app.vue

<template>
   <button v-on:click="this.Alerta()">test</button>
</template>

Thanks!

回答1:

Yes, you can call it directly. Methods from the mixin are merged with the Vue or component they are "mixed in" with. They can be called the same way as any other method.

console.clear()

const Mixin = {
  methods:{
    Alerta(){
      alert("WORK!")
    }
  }
}

new Vue({
  mixins: [Mixin],
  el: "#app"
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script>
<div id="app">
 <button @click="Alerta">Alert!</button>
</div>

来源：https://stackoverflow.com/questions/46592331/vuejs-mixins-methods-direct-call