Digamos que creé un complemento en mi aplicación Nuxt:
plugins: [ '~/plugins/toggler', ],que contiene:
import Vue from 'vue' Vue.mixin({ data() { return { isActive: false } }, methods: { toggler() { this.isActive = !this.isActive }, }, })Me gustaría alternar clases en elementos en diferentes componentes, como:
<div :class="{ 'is-active': isActive }"></div>y se activa correctamente a través de un botón:
<button @click.prevent="toggler" />Sin embargo, esto solo cambia la clase en otros elementos dentro del mismo componente .vue donde está el botón.
Otros elementos con el mismo :class="{ 'is-active': isActive }" en diferentes componentes .vue no se ven afectados, a menos que agregue un botón en esos componentes también.
Aquí hay una caja de arena: https://codesandbox.io/s/tender-http-fqlx5
¿Por qué creas un mixin en un complemento?
Crear y usar mixin:
crear:
En la carpeta mixins dentro, está creando un archivo mixin (example.js)
uso:
importar en el componente:
import example from '~/mixins/example'Mezclando la definición en el componente en el script:
export default { mixins: [example], data() { return {} }, computed: {}, methods: {} }Esto permite que sea reutilizado en cualquier componente.