05.script_setup中的私有属性

Posted 2022-08-06 @大迁世界

这节课，我们来看一下怎么在 vue3 script setup 中设置私有属性。

有时，当一个组件被 $ref 访问时，我们想指定该组件中的哪些属性可被访问，哪些不可访问。这里的不可访问，我们暂且先称作私有属性。那怎么来实现私有属性呢？

这个可以使用 vue3 中新出的 expose 属性，我们直接看例子。

// User.vue
<template>
  <div>
    <p>私有数据:
   privateData </p>
    <p>私有数据(大写):
   upperCasePrivateData </p>
  </div>
</template>

<script>
export default 
  data() 
    return 
      privateData: \'secrecy\',
    
  ,
  computed: 
    upperCasePrivateData() 
      return this.privateData.toUpperCase()
    ,
  ,

</script>

在 User 组件中，我们声明了一个 privateData 值为 secrecy，然后还有一个计算属性 upperCasePrivateData 它的值是 privateData 的大写形式。最后，在模板中把这两个值显示出来，如下所示：