vue.js - 如何在不展开的情况下将 ref 传递给方法/函数参数?
问题描述
我们正在使用 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
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>
推荐阅读
- laravel - 更新密码时停止用户退出
- azure - Azure API 管理缓存不适用于错误“请求不可缓存,未应用策略”。
- google-chrome - HTML5 画布在缩小 Chrome 中的绘图时显示为别名
- r - 如何根据行值合并 R 中的数据并用它创建新变量?
- r - R uniroot:从具有多个参数的函数中求解 uniroot 中的未知变量
- web-chat - 如何将工具提示添加到 Microsoft Bot Framework Webchat 中的 QnAMakerOptions 按钮
- python - 无法以 python 方式删除 dataset.columns.name
- wordpress - Mac 上的 MAMP 不会运行 Wordpress(5.5.3) 安装程序
- html - 为什么两个div在css中定位时不重叠?
- c# - 如何对 DataGrid 的最后一列中的值求和