我想使用外部文件中定义的方法更新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
1条答案
按热度按时间flvlnr441#
当在模板中使用引用时,会自动展开引用,这意味着您的行
相当于
它不是React性的。您要做的是发送实际的count ref,这只能在
<script>
标记中完成