VueJS Mixins 方法直接调用

Question

我正在 VueJS 上测试 Mixins，我有一个问题。有没有办法直接从 Mixins 调用事件而不必在我的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>

上面的代码有效。我想知道如何直接调用 mixin 函数，如下所示：

app.vue

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

谢谢！

Answer 1

是的，您可以直接调用它。 mixin 中的方法合并 与它们“混合”的 Vue 或组件。它们可以像任何其他方法一样被调用。

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>