Creación de un componente Slider utilizando la librería tiny-slider

De esta clase resalto:

• this.$el hace referencia al elemento padre del componente.
• Anteponer el símbolo $ al nombre de una propiedad dentro del método data de la instancia anula toda la reactividad de esa propiedad.

Aqui el ejemplo con VueTinySlider:

<template>
  <tiny-slider
    :mouse-drag="options.mouseDrag"
    :auto-init="options.autoInit"
    :loop="options.loop"
  >
    <slot></slot>
  </tiny-slider>
</template>
<script\>
import VueTinySlider from 'vue-tiny-slider'

export default {
  name: 'Slider',
  components: {
    'tiny-slider': VueTinySlider
  },
  props: {
    options: {
      type: Object,
      default: {
        mouseDrag: false,
        loop: true,
        autoInit: true,
        controls: true
      }
    }
  }
}
<script\>
<style lang="scss">
@import './node_modules/tiny-slider/src/tiny-slider.scss';
</style>```

Para los que usamos npm

npm i tiny-slider

También podemos usar el componente/librería tiny-slider 2.0 for Vue con toda la implementación de la librería base ya lista para usar en nuestra aplicación con Vue.

¿Que diferencia hay entre usar la librería de forma tradicional (más rápido) a convertirla en un componente (mucho código)?,

En este enlace hay una explicación detallada de los componentes controlados.
link

tiny-slider 2.0 for Vue

(https://www.npmjs.com/package/vue-tiny-slider)

por parte de la reactividad no es mejor usar $mount en vez de $el? si solo vamos a usar esa instancia para un propósito especifico

Podemos ahorrarnos la escritura de los divs con esta linea gracias a emmet

.slider-item{$}*6

tiny-slider 2.0 for Vue

Pregunta, el metodo beforeDestroy se invoca a través del hook beforeDestroy() del componente vue?

Profe que extension usa para el autocompletado de los archivos veo que es muy eficiente vscode en esa parte o solo son ideas mia?

Me encanto está clase

Bravo, bravisimo!!. Excelente clase.

Les comparto mi código de TinySlider.vue

<template>
  <div class="slider-wrapper">
    <slot></slot>
  </div>
</template>

<script>
import { tns } from 'tiny-slider/src/tiny-slider';
import 'tiny-slider/dist/tiny-slider.css';

export default {
  name: 'TinySlider',
  data() {
    return {
      $slider: null,
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      const settings = {
        container: this.$el,
        mode: 'gallery',
      };
      this.$slider = tns(settings);
    },
  },
  beforeDestroy() {
    if (this.$slider) {
      this.$slider.destroy();
    }
  },
};
</script>

Increíble, esto significa que puedo tomar cualquier librería ya existente y transformarla a un componente de Vue:D esto puede ser bueno pues no me obligo a buscar librerías que estén únicamente desarrolladas con Vue