#vue.js #vuejs2 #vue-composition-api
#vue.js #vuejs2 #vue-composition-api
Вопрос:
Мы используем API Vue Composition и хотели бы передать ref
объект, а не только значение, в качестве аргумента функции. Немного кода для уточнения:
import { defineComponent, ref } from '@vue/composition-api'
export default defineComponent({
setup() {
const driverId = ref()
const truckId = ref()
const clearDriverId = () => {
driverId.value = null
}
Приведенный выше код работает нормально, но нам нужно дублировать функцию clearDriverId
для truckId
too . Вот почему мы хотели бы создать что-то вроде этого:
const clearField = (field: Ref) => {
field.value = null
}
Доступ из шаблона:
<q-input
label="Driver ID"
v-model="driverId"
>
<template v-slot:append>
<q-icon
name="close"
@click.stop="clearField(driverId)"
/>
</template>
</q-input>
Конечно, это не работает, потому ref
driverId
что он разворачивается при передаче из шаблона в функцию. Каков правильный способ передать полный ref
объект функции?
Ответ №1:
Одним из решений setup()
является возврат объекта / словаря, который содержит все ваши ref
s (предотвращая их автоматическое разворачивание), который затем может быть использован для передачи специфичной ref
для вашей функции. Утилита ( toMyRefs()
ниже), которая возвращает ref
вместе со ref
словарем, была бы полезна для минимизации повторяющегося кода:
<template>
<div>
<button @click="clearField(myRefs.driverId)">Clear driverId</button>
<button @click="clearField(myRefs.truckId)">Clear truckId</button>
<button @click="clearField(myRefs.carId)">Clear carId</button>
<button @click="clearField(myRefs.trainId)">Clear trainId</button>
<pre>
driverId: {{ driverId }}
truckId: {{ truckId }}
carId: {{ carId }}
trainId: {{ trainId }}
</pre>
</div>
</template>
<script>
import { defineComponent, ref } from '@vue/composition-api'
const toMyRefs = refs => ({
...refs,
myRefs: {
...refs
}
})
export default defineComponent({
setup() {
const driverId = ref(1)
const truckId = ref(2)
const carId = ref(3)
const trainId = ref(4)
const clearField = (field) => {
field.value = 0
}
return {
...toMyRefs({
driverId,
truckId,
carId,
trainId,
}),
clearField,
}
}
})
</script>