从组件的 <script setup> 中定义暴露在 vue 3 中不起作用

Question

一般而言，Vue 新手，目前使用 3.2.37，我可能误解了composition api\xe2\x80\x99s DefineExpose 指令的正确用法，如下所述： https: //vuejs.org/api/sfc-script-setup.html #defineexpose

\n

还有一些线程，解释如何从内部公开成员，<script setup>例如Calling method on Child Component - Composition API。但不知何故，我无法设法version公开子组件的常量引用HelloWorld，以便可以将其version插值到app组件中。

\n

应用程序.vue：

\n

<script setup>\nimport HelloWorld from \'./components/HelloWorld.vue\'\n</script>\n\n<template>\n  <main>\n    <HelloWorld />\n    <h1>version:{{HelloWorld.version}}</h1>\n  </main>\n</template>\n

\n

你好世界.vue：

\n

<script setup>\nimport { ref } from \'vue\';\n\nconst version = ref(\'1.0.0\');\n\ndefineExpose({ version });\n</script>\n\n<template>\n    <div>\n        <h3> You\xe2\x80\x99ve successfully created a project with Vue.js and Vuetify. </h3>\n    </div>\n</template>\n

\n

图像：\n版本 1.0.0 未显示

\n

Answer 1

defineExpose()在组件的模板 ref上公开属性，而不是在从文件导入的组件定义上公开属性.vue。

\n

<App>可以使用计算的 prop 来访问<HelloWorld>\ 的公开versionprop：

\n

\n
1. 应用模板参考<HelloWorld>：
\n

\n

<!-- App.vue -->\n<HelloWorld ref="helloWorldRef" />\n

\n

\n
2. 创建一个ref与模板引用同名的：
\n

\n

<!-- App.vue -->\n<script setup>\nimport { ref } from \'vue\'\n\nconst helloWorldRef = ref(null)\n</script>\n

\n

\n
3. 创建一个返回<HelloWorld>\ 的公开versionprop 的计算 prop。确保在 上使用可选链接（或null-check）helloWorldRef.value，因为它最初是null：
\n

\n

<!-- App.vue -->\n<script setup>\nimport { computed } from \'vue\'\n\nconst version = computed(() => helloWorldRef.value?.version)\n</script>\n\n<template>\n  \xe2\x8b\xae\n  <h1>version:{{ version }}</h1>\n</template>\n

\n

演示

\n

Answer 2

你可以检查这个网站...

使用Options API 或Composition API 的组件默认打开。

如果我们尝试通过模板引用或 $parent 链访问此类组件的公共实例，它将不会公开块内声明的任何绑定。

我们可以使用defineExpose编译器宏来显式公开属性：

儿童.vue

<script setup>
import { ref } from 'vue'
const foo = ref('foo')
const bar = ref('bar')
defineExpose({
  foo,
  bar,
})
</script>

当父级通过模板 ref 获取 Child.vue 的实例时，检索到的实例的形状将是 { foo: string, bar: string } （引用会像普通实例一样自动展开）：

家长.vue

<template>
  <Child ref="child" />
</template>
<script setup>
import { ref } from 'vue'
const child = ref(null);

onMounted(() => {
  console.log(child.value.foo)
  console.log(child.value.bar)
})

</script>

Answer 3

DOM 元素和组件实例的对象，通过模板引用注册。

你可以这样做。

<HelloWorld ref="hello" />
<h1>version:{{ $refs.hello.version }}</h1>