如果是用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的方式呢,又要重复写一次子组件,也非常难受。
就没有同时拥有两者优点的方式吗?
可以通过解构把msg直接暴露给模版
const {msg}=toRefs(self)
要注意的时,必须通过toRefs,不然直接解构,msg会失去响应性
