如何访问一个复合API Vue 2.7组件的变量

Question

我有一个组件:

<template>
<div class="toggle">
<div v-show="toggle">
{{ text }}
<slot :toggle="toggleSlots" name="first"></slot>
</div>
<div v-if="!toggle">
<slot :toggle="toggleSlots" name="second"></slot>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue';
const toggle = ref(true);
const text = ref('hi');
function toggleSlots() {
toggle.value = !toggle.value;
}
setTimeout(() => {
text.value = 'hii';
}, 1000);
</script>

和一个笑话测试:

import { mount } from '@vue/test-utils';
import AppToggle from './toggle.vue';
describe('Toggle', () => {
it('should toggle the slots', async () => {
const wrapper = mount(AppToggle);
expect(wrapper.vm.toggle).toBeTruthy(); // vm.toggle is undefined
wrapper.vm.toggleSlots(); // vm.toggleSlots is undefined
expect(wrapper.vm.toggle).toBeFalsy();
});
});

当我使用选项API编写组件时，测试通过了。如果我使用组合API，我定义的所有变量或函数都不是在wrapper.vm上定义的。

我发现了其他的例子，他们做了同样的事情，但它不适合我。

Answer 1

组件使用默认关闭-即组件的公共实例，通过模板引用或$parent链检索，将不会暴露内部声明的任何绑定。

要显式地公开组件中的属性，请使用defineExpose编译器宏。

<script setup>
import { ref } from 'vue'
const a = 1
const b = ref(2)
defineExpose({
a,
b
})
</script>

来源:https://vuejs.org/api/sfc-script-setup.html defineexpose

我添加了

defineExpose({ toggle, toggleSlots });

在脚本末尾，现在测试通过了。