defineExpose来自组件的<script setup>在vue 3中不工作
defineExpose来自组件的<script setup>在vue 3中不工作
提问于 2022-08-13 13:38:13
对于Vue来说，我一般都是新手，目前正在使用3.2.37，我可能认为正确使用复合api的defineExpose指令，如本文所述：https://vuejs.org/api/sfc-script-setup.html#defineexpose
还可以找到一些线程，解释如何在<script setup>内部公开成员，比如子组件调用方法-组合API。但不知何故，我无法从子组件HelloWorld中公开HelloWorld常量ref，这样就可以在app组件中插入它的version。
app.vue：
<script setup>
import HelloWorld from './components/HelloWorld.vue'
</script>
<template>
<main>
<HelloWorld />
<h1>version:{{HelloWorld.version}}</h1>
</main>
</template>HelloWorld.vue：
<script setup>
import { ref } from 'vue';
const version = ref('1.0.0');
defineExpose({ version });
</script>
<template>
<div>
<h3> You’ve successfully created a project with Vue.js and Vuetify. </h3>
</div>
</template>图片：版本1.0.0未显示
回答 3
Stack Overflow用户
发布于 2022-08-13 21:21:14
defineExpose()公开组件的模板参考属性，而不是从.vue文件导入的组件定义。
<App>可以使用计算机道具来访问<HelloWorld>公开的version支柱：
- 在
<HelloWorld>上应用模板参考
<!-- App.vue -->
<HelloWorld ref="helloWorldRef" />- 创建一个与模板引用名称相同的
ref：
<!-- App.vue -->
<script setup>
import { ref } from 'vue'
const helloWorldRef = ref(null)
</script>- 创建一个返回
<HelloWorld>公开的version支柱的计算道具。确保在helloWorldRef.value上使用可选链 (或null-check)，因为它最初是null。
<!-- App.vue -->
<script setup>
import { computed } from 'vue'
const version = computed(() => helloWorldRef.value?.version)
</script>
<template>
⋮
<h1>version:{{ version }}</h1>
</template>Stack Overflow用户
发布于 2022-08-13 14:52:49
DOM元素和组件实例的对象，通过模板参考文献注册。
你可以这样做。
<HelloWorld ref="hello" />
<h1>version:{{ $refs.hello.version }}</h1>Stack Overflow用户
发布于 2022-11-21 08:48:45
你可以检查这个网站..。
默认情况下，使用Options或Composition的组件是打开的。
如果我们试图通过模板ref或$parent链访问这样一个组件的公共实例，它将不会公开在块中声明的任何绑定。
我们可以使用defineExpose编译器宏显式地公开属性：
Child.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 }的形状(ref被自动展开，就像在普通实例上一样)：
Parent.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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73344760
复制相关文章
相似问题
腾讯云开发者
