05.script_setup中的私有属性

@大迁世界

已于 2022-08-06 14:55:17 修改

阅读量437

点赞数 1

分类专栏： Vue2与Vue3技巧小册文章标签： vue.js javascript 前端

于 2022-07-28 23:01:55 首次发布

本文链接：https://blog.csdn.net/qq449245884/article/details/126044758

版权

Vue2与Vue3技巧小册专栏收录该内容

19 篇文章 1 订阅 ¥19.90 ¥99.00

订阅专栏

超级会员免费看

本文探讨了在Vue3的script setup语法中如何设置私有属性，通过使用`_`前缀来限制外部访问组件内部的某些属性。通过示例展示了如何声明和使用私有属性，以及在使用组合API时的注意事项。文章还强调了`_`并非实际的函数，而是一个编译器宏。

摘要由CSDN通过智能技术生成

这节课，我们来看一下怎么在 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，然后还有一个计算属性

了解本专栏