我想使用一个写在外部文件中的方法来更新Vue.js 3的React值

jmp7cifd  于 2023-06-24  发布在  Vue.js
关注(0)|答案(1)|浏览(116)

我想使用外部文件中定义的方法更新Vue.js 3的React值。(例如)我正在学习Vue.js 3。首先,我想将React值传递给外部文件中定义的方法并更新值。
我创建了一个用于测试的计数组件。在increment 1方法中,值会更新(屏幕上的数字会增加),但在increment 2方法中,值不会更新。要更新increment 2方法中的值,需要进行哪些修改?

相关源代码

<script setup lang="ts">
import { Ref, ref } from 'vue';
import { increment as increment2 } from './increment';

const count = ref(0);
const increment1 = () => {
  count.value++;
}

</script>

<template>
  <main>
      <p>Counter Value</p>
      <p>{{ count }}</p>
\      <button @click="increment1()">Action1</button>
\      <button @click="increment2(count)">Action2</button>
  </main>
</template>
export const increment = (count: number) => {
  count++;
}

固件/工具版本:
Vue.js 3.2.27 TypeScript 4.7.4

flvlnr44

flvlnr441#

当在模板中使用引用时,会自动展开引用,这意味着您的行

@click="increment2(count)"

相当于

@click="increment2(count.value)"

它不是React性的。您要做的是发送实际的count ref,这只能在<script>标记中完成

import { increment } from "./increment.js";

const increment2 = () => {
  increment(count);
};
<button @click="increment2">Action2</button>

相关问题