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>

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>

谢谢！

Answer 1

可以，可以直接调用。 mixin 中的方法合并与它们 "mixed in" 的 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>

VueJS Mixins 方法直接调用

VueJS Mixins Methods Direct Call

mixins

vue.js

vue-component

vuejs2