Esta respuesta es valida para VUE 2.
- Esta usando bien los
mixin
con la exepcion de la llamada a prueba, debes referenciar asi:this.$prueba
en este caso es una funcion asi quethis.$prueba()
Sin embargo cito esta advertencia de la pagina de vue https://es.vuejs.org/v2/guide/mixins.html
Utilice los mixins globales lo menos posible y con cuidado, ya que afecta a cada instancia creada de Vue, incluidos los componentes de terceros. En la mayoría de los casos, solo debe usarlos para el manejo de opciones personalizadas como se muestra en el ejemplo anterior. También es buena idea dejarlos disponibles como Plugins para evitar su uso duplicado.
- Otra forma de hacer esto es acceder al prototype de Vue para agregar una propiedad que sea reutilizable en todos los componentes. puede hacerlo de esta forma:
main.js
import Vue from 'vue'
Vue.prototype.$prueba = function(){
return "hola mundo"
}
Luego en su componente
export default{
mounted(){
console.log( this.$prueba() )
}
}
- Tambien seria posible para crear una función mas global agregarla en un
<script>
delindex.html
dentro del directoriopublic
. de esta forma:
public > index.html
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
<meta name="theme-color" content="#055756" />
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong
>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
properly without JavaScript enabled. Please enable it to
continue.</strong
>
</noscript>
<div id="app"></div>
<script>
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min)) + min;
}
</script>
</body>
</html>
de esta forma ya puede usar esa funcion en toda la aplicacionaplicación.
componente.vue
console.log(getRandomInt())
export default{
mounted(){
console.log(getRandomInt())
}
}