Vue.js中如何将实例globalProperty作为组件prop的默认值使用

问题原因 #

你写的两种写法都拿不到实例的核心原因有两个：

1. 直接写default: this.$utils.uuid时，组件选项是在实例创建前解析的，此时this根本不指向当前组件实例，自然无法访问挂载在实例上的全局属性。
2. 箭头函数的this会捕获定义时的父级上下文，永远不会绑定到组件实例，所以用箭头函数也拿不到this.$utils。

分版本解决方案 #

Vue 3 环境

直接把default改为普通的工厂函数即可，Vue 3 中prop的默认值工厂函数会自动绑定组件实例作为this：

props: {
  id: {
    type: String,
    default() {
      // 注意如果uuid是方法需要加()调用，不然默认值是函数本身
      return this.$utils.uuid()
    }
  }
}

Vue 2 环境

Vue 2 全版本都不支持在prop的default函数中访问组件实例，推荐两种替代方案：

• 方案1：直接导入工具模块使用
  你既然能把utils挂载到全局原型上，必然可以直接导入对应的工具文件，避开访问实例的需求：

// 直接导入你挂载到Vue原型的utils模块
import utils from '@/utils/index.js'

export default {
  props: {
    id: {
      type: String,
      default: () => utils.uuid()
    }
  }
}

• 方案2：在生命周期/计算属性中兜底默认值
  把prop设为非必填，在实例创建后再赋值默认值：

props: {
  id: String
},
computed: {
  finalId() {
    return this.id ?? this.$utils.uuid()
  }
}
// 或者在created钩子中给data赋值
data() {
  return {
    innerId: ''
  }
},
created() {
  this.innerId = this.id || this.$utils.uuid()
}

内容的提问来源于stack exchange，提问作者PhilipCodeX