VueJS Mixins方法直接调用

时间:2017-10-05 18:17:20

标签: vue.js vuejs2 vue-component mixins

我在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>

谢谢!

1 个答案:

答案 0 :(得分:2)

是的,您可以直接拨打电话。 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>