Vue中props的默认值defalut使用this时的问题

一、default 的两种写法

1. 对象的写法

基本类型 String, Number, Boolean

  props: {
    title: {
      type: String,
      default: "标题"
    },
    number: {
      type: Number,
      default: 1
    },
    boolean: {
      type: Boolean,
      default: true
    },
  },

数组和对象 Array, Object

  props: {
    array: {
      type: Array,
      default: () => ([])
    },
    object: {
      type: Object,
      default: () => ({})
    },    
  }

函数 Function

  props: {
    func: {
      type: Function,
      default: () => {}
    },
  }

2. 函数的写法

不管什么类型，都可写在函数返回中

  props: {
    title: {
      type: String,
      default() { return "标题" }
    },
    number: {
      type: Number,
      default() { return 1 }
    },
    boolean: {
      type: Boolean,
      default() { return true }
    },
    array: {
      type: Array,
      default() { return [] }
    },
    object: {
      type: Object,
      default() { return {} }
    },
    func: {
      type: Function,
      default() { return () => {} }
    },        
  },

二、default 中使用 this 时的问题

假设 data 中定义了一个属性 myTitle

正确用法

  props: {
    title: {
      type: String,
      default: () => this.myTitle
    },
  },

错误用法（此时的 this 并不指向 Vue 实例）

  props: {
    title: {
      type: String,
      default: this.myTitle
    },
  },

这可能与 Vue 底层对 default 做的特殊处理有关