如何在不展开的情况下将 ref 传递给方法/函数参数？答案

【问题标题】：How to pass a ref to a method/function argument without unwrapping?如何在不展开的情况下将 ref 传递给方法/函数参数？
【发布时间】：2020-12-02 13:15:05
【问题描述】：

我们正在使用 Vue 组合 API，并希望将 ref 对象（而不仅仅是值）作为参数传递给函数。一些代码需要澄清：

import { defineComponent, ref } from '@vue/composition-api'

export default defineComponent({
  setup() {
    const driverId = ref()
    const truckId = ref()

    const clearDriverId = () => {
      driverId.value = null
    }

上面的代码运行良好，但我们还需要为truckId 复制函数clearDriverId。这就是为什么我们要创建这样的东西：

    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 对象传递给函数的正确方法是什么？

【问题讨论】：

标签： vue.js vuejs2 vue-composition-api

【解决方案1】：

setup() 中的一个解决方案是返回一个包含所有 refs 的对象/字典（防止它们的自动解包），然后可以使用该对象/字典将特定的 ref 传递给您的函数。返回ref 和ref 字典的实用程序（下面的toMyRefs()）将有助于减少重复代码：

<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>

demo

【讨论】：