Рубрики
Vue декомпозиция Composition Api 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>

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *