一、类访问修饰符

ts中有四个修饰符，分别为：

  • public - 公有
  • private - 私有
  • protected - 受保护的
  • readonly - 只读

    public

    在ts的类中，所有成员若是没有指定修饰符，成员默认都是public的。
    使用public修饰符的成员，可以在类的内外自由访问： ```typescript class App { // 未指定修饰符，默认为public，等同于： public name = ‘韩梅梅’ name = ‘韩梅梅’ public age = 18 } const myName = new App().name // 韩梅梅
  1. <a name="hWtp3"></a>
  2. ## private
  3. 当成员被标记为private时，则不能在类的外部访问该成员：
  4. ```typescript
  5. class App {
  6.   // 未指定修饰符，默认为public，等同于： public name = '韩梅梅'
  7.   private name = '韩梅梅'
  8.   public age = 18
  9. }
  10. const myName = new App().name // error: 属性“name”为私有属性，只能在类“App”中访问。ts(2341)

protected

protected与private行为相似，但有一点不同，protected成员在派生类中可以访问。
vue中的使用场景较少，此处就不赘述protected的作用了。

readonly

被标记为readonly的成员代表他是只读的，不能赋值与修改：

  1. class App {
  2.   // 未指定修饰符，默认为public，等同于： public readonly name = '韩梅梅'
  3.   readonly name = '韩梅梅'
  4. }
  5. const myName = new App().name // 韩梅梅
  6. new App().name = '李雷' // error: Cannot assign to 'name' because it is a read-only property.ts(2540)

readonly可以与其他三个修饰符共同存在：

  1. class App {
  2.   readonly name = '韩梅梅'
  3.   public readonly age = 18
  4.   private readonly gender = '女'
  5.   protected readonly phone = '133********'
  6. }

但是其他三个同时只能存在一个：

  1. class App {
  2.   public private name = '韩梅梅' // error: 已看到可访问性修饰符。ts(1028)
  3. }

修饰符在Vue中的作用

了解了基础知识后，再来了解一下修饰符在vue中会产生的影响。

这几个修饰符除了readonly外，其他大都是对于从外部访问类时的限制。在vue中从外部类访问比较常见的就是 ref、$children、$parent 等情况。下面以 ref 作为示例，protected在此暂不说明。
若是示例暂时看不懂的话，可以先查看 Vue ts - 实例选项 篇后再来看该案例。

子组件 TodoItem.vue

  1. // 子组件 TodoItem.vue
  2. import { Component, Vue } from 'vue-property-decorator'
  4. @Component
  5. export default class TodoItem extends Vue {
  6.   name = '韩梅梅' // 未带修饰符，默认为public
  7.   public age = 18
  8.   readonly department = '销售部'
  9.   private gender = '女'
  10. }

父组件 Todo.vue

  1. // 父组件 Todo.vue
  2. import { Component, Vue, Ref } from 'vue-property-decorator'
  3. import TodoItem from '@/components/TodoItem.vue'
  5. @Component({
  6.   components: { TodoItem },
  7. })
  8. export default class Todo extends Vue {
  9.   @Ref('refTodoItem') readonly refTodoItem!: TodoItem // Vue Component
  11.   private mounted() {
  12.     // public修饰的属性可以从外部自由的访问和修改
  13.     console.log(this.refTodoItem.name) // 韩梅梅
  14.     console.log(this.refTodoItem.age) // 18
  15.     this.refTodoItem.age = 20
  16.     console.log(this.refTodoItem.age) // 20
  18.     // readonly修饰的属性可以从外部访问，但是不能修改
  19.     console.log(this.refTodoItem.department) // 销售部 
  20.     // error: Cannot assign to 'department' because it is a read-only property.Vetur(2540)
  21.     this.refTodoItem.department = '营业部'
  23.     // provide修饰的私有属性无法从外部访问和修改
  24.     // error: Property 'gender' is private and only accessible within class 'TodoItem'.Vetur(2341)
  25.     console.log(this.refTodoItem.gender)
  26.   }
  27. }

由上述例子就可以大概知道这几个修饰符在vue中的具体作用了，哪个属性该用什么修饰符相信大家心里也可以有个大概。具体的每个属性将会在最后面有个完整示例给大家。