Рубрика: Vue декомпозиция

операция, состоящая в разделении целого на части

Рубрики
Vue hook

Использование Hook в компоненте Vue

  • Автор записи Автор: bo52
  • Дата записи 16.04.2022
  • Создание Hook файла по структуре
    hooks\ИмяХука.js
//импортирование модификатора по созданию переменных
//и/или лайвсак методы 
//в хук функции
import {ref,onMounted,onCreated,computed,watch} from 'vue';
export function ИмяХука(Стат.Параметры){
//тело функции хука
//lat ИмяПеременной=ref(Значение) 
//реактивные переменные, где 
//изменение переменной через value
//использование лайвсак методы
//onMounted(параметр);
//onCreated(параметр);
//computed(параметр);
//watch(параметр);
//return {ИмяПеременной,...};
}
  • Вызываем хук в компоненте в script и template
<template>
<div v-model="ИмяПеременной"></div>
</template>

<script>
export default{
setup(props){
  //объект возвращает хук
  const {ИмяПеременной,...} = ИмяХука(Параметр);
  ....
  return {ИмяПеременной,...};
}
}
</script>
Рубрики
Composition Api Vue декомпозиция Vue3 логика

Composition API (setup) в компоненте

setup
функция принимает параметры props

ref
функция используется для того чтобы переменная стала реактивной, которая параметром принимает значение

Всё что мы вернём функции setup будет доступно в шаблоне компонента <template>

<template>
<div>{{myvar}}</div>
</template>
<script>
import {ref} from 'vue'
export default {
 setup(props){
  const myvar=ref(Значение);
  return {myvar};
 }
}
</script>

Состав
Динамически изменить переменную
Value

  • создаём стрелочную функцию, в которой внутри тела изменяем значение переменной, обращаясь к полю value
  • отметим возвращение функции addmyvar из setup для доступа в шаблоне компонента
    (привязка к button прослушивание события click)
<template>
<div>{{myvar}}</div>
<button @click="addmyvar">add</button>
</template>
<script>
import {ref} from 'vue'
export default {
 setup(props){
  const myvar=ref(0);
  const addmyvar = () =>{
    myvar.value+=1;
  }
  return {myvar,addmyvar };
 }
}
</script>