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>