05.script_setup中的私有属性

这节课，我们来看一下怎么在 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 的大写形式。最后，在模板中把这两个值显示出来，如下所示：