我们正在使用Vue Composition API，并且希望将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过。这就是为什么我们要创建以下内容：
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对象传递给函数的正确方法是什么？
一种解决方案setup()是返回包含所有的对象/字典ref（防止它们自动展开），然后可以将其用于将特定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>
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句