Рубрики
Vue Mixins Vue.js

Примеры Vue Mixins

mydialog
компонент модальное окно

у него есть props show и в зависимости от этого пропса данное окно видимое или не видимое
есть функция, которая изменяет значение этого атрибута, например делает emit

  • использование для компонента
    List
    кастомный выпадающийся список
  • создание мексина
    может быть видим или не видим.
    есть функция, которая значение это меняет
    mixins\toggleMixin.js
export default{
 props:{
  show:{type:Boolean,default:false}
 },
 methods:{
   hideDialog(){
     this.$emit('update:show',false);
   }
 },
}
  • вызов миксина (пропса)
    в каком то компоненте в проекте
<template>
{{show}}
</template>
<script>
import toggleMixin from './mixins/toggleMixin';
export default {
 mixins:[toggleMixin],
}
</script>
Рубрики
Vue Mixins Vue компонент Vue3 логика

Структура Mixins в Vue

  • Структура примеси файла
    mixins/ИмяМексина.js
export default {
 props:{prop1},
 data(){},
 methods:{},
 computed:{},
 watch:{},
...
}
  • Использование примеси в компоненте
    На примере обращение к пропсу prop1
<template>
{{prop1}}
</template>
<script>
import ИмяМексина from './mixins/ИмяМексина';
export default {
 mixins:[ИмяМексина],
}
</script>
Mixins во Vue.js
Vue.js