在vue3的setup script中,有什么办法手动指定暴露给template的属性?
如果是用setup方法,可以用return对象的方式,把这个对象的属性暴露给template
<script lang="ts">
import HelloWorld from './components/HelloWorld.vue'
import { reactive } from 'vue';
export default {
components: { HelloWorld },
setup() {
const self = reactive({
msg: "You did it!"
})
return self
}
}
</script>
<template>
<header>
<div class="wrapper">
<HelloWorld :msg="msg" />
</div>
</header>
</template>
但是用了setup script,默认就是自动将所有临时变量作为属性暴露给template
<script lang="ts" setup>
import HelloWorld from './components/HelloWorld.vue'
import { reactive } from 'vue';
const self = reactive({
msg: "You did it!"
})
// 怎么操作self才能把self的msg属性暴露给template?
</script>
<template>
<header>
<div class="wrapper">
<!-- 只能指定self这个属性 -->
<HelloWorld :msg="self.msg" />
</div>
</header>
</template>
如果在setup script中都用临时变量呢,所有属性都要ref
,然后在script中使用的时候msg.value
。看起来和用起来都非常的难受。而用export options的方式呢,又要重复写一次子组件,也非常难受。就没有同时拥有两者优点的方式吗?
回复
1个回答
test
2024-07-06
可以通过解构把msg直接暴露给模版
const {msg}=toRefs(self)
要注意的时,必须通过toRefs,不然直接解构,msg会失去响应性
本文参与了SegmentFault 思否面试闯关挑战赛,欢迎正在阅读的你也加入。
回复
适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引,对解决问题有帮助
- 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容