如何在导入函数中引用 setup() 变量？

Question

我有一个组件，我在其中定义了一个反应变量，我想在导入的函数中使用它。代码的一个简单示例是 available in the playground

App.vue

<script setup>
import { change }  from './lib.js'
import { ref } from 'vue'

const msg = ref('one')
change()
</script>

<template>
  <h1>{{ msg }}</h1>
</template>

lib.js

export const change = () => msg.value = 'two'

上面的代码当然不起作用因为change()不知道msg。另一方面，Msg 不能作为 <setup script> 唯一变量导出。

我的问题：我应该如何声明 msg 以便我可以从导出的函数中引用它？或者，是否可以在 lib.js?

中声明一个反应变量

Answer 1

您可以像这样将 msg 作为参数传递给您的 change 方法

lib.js

export const change = (msg) => msg.value = 'two'

并像在你的文件中那样使用它 App.vue

const msg = ref('one')
change(msg)

如何在导入函数中引用 setup() 变量？

How to reference a setup() variable in an imported function?

vue.js

vue-component

vuejs3