1

Estou a testar Mixins no VueJS e me surgiu uma dúvida. Tem como eu chamar um evento diretamente de um Mixins sem eu ter que atribuir no meu 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>

O código acima funciona. Eu queria saber como eu poderia invocar a função do mixin diretamente, algo assim:

app.vue

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

Obrigado!

1 Resposta 1

1

Você esta registrando um Mixin Global, basta apenas referenciar o método no evento click sem há necessidade de criar novo método.

<button v-on:click="Alerta">test</button>

Mas a documentação deixa um alerta.

Utilize mixins globais raramente e cuidadosamente, porque eles afetam cada uma das instâncias Vue criadas, incluindo os componentes de terceiros. Na maioria dos casos, você deveria utilizá-los somente para tratar opções personalizadas, como demonstrado no exemplo acima. É também uma boa ideia disponibilizá-los como Plugins, para evitar uso duplicado.

Vamos cria um plugin básico, ele deve conter um método install e será chamado tendo o construtor Vue como primeiro argumento e outras opções.

const Alerta = {
  install(Vue, options) {
    Vue.mixin({
      methods: {
        AlertaA() {
          alert("Alerta A!");
        },
        AlertaB() {
          alert("Alerta B!");
        },
        AlertaC() {
          alert("Alerta C!");
        }
      }
    });
  }
};

export default Alerta;

Para utilizar

import Vue from "vue";
...
// Plugin
import Alerta from "./alerta.mixins";
Vue.use(Alerta);

O template:

<template>
  <div id="app">
    <button v-on:click="AlertaA">A</button>
    <button v-on:click="AlertaB">B</button>
    <button v-on:click="AlertaC">C</button>
    <button v-on:click="AlertaD">D</button>
  </div>
</template>

Podes ver funcionando em codesandbox

1
  • Perfeito!! Obrigado!!!
    – Jackson
    Commented 14/03/2018 às 20:15

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .