Vue.prototype的使用

经常看别人的项目都有 this.$xxx ，此时会有疑问？这东西是干嘛的？怎么用？
：它是就是解决替换全局使用的一个标识。
官网其实也说了很明白。
例如：
来自真实项目。在main.js 或app.vue里声明一个自定义组件日期选择。

import datePicker from './components/datePicker'
// 这里就是全局替换 datePicker的标识
Vue.prototype.$datepicker = datePicker;

使用：
this.$xxx , 可以赋值，替换某个属性

this.$datePicker

例如，调用自定义的日期选择器：
          // 日期选择
            showDatePicker(num) {
                let init = JSON.parse(JSON.stringify(this.minTime));//保留页面数据，否则选择时页面的时候会跟随选项一起变动，但是取消之后不会还原
                // 这里就是 datepicker
                this.$datepicker({
                    type: 3,
                    value: init,
                    min: this.time,
                    max: this.maxTime,
                    change: (e) => {
                    }
                }).then((e) => {
                    // this.time = e;
                    let t = e;
                    t.splice(1, 0, '年');
                    t.splice(3, 0, '月');
                    t.splice(5, 0, '日');
                    t = t.join('');
                    var y = e[0],
                        m = e[2] > 9 ? e[2] : '0' + e[2],
                        d = e[4] > 9 ? e[4] : '0' + e[4];
                    var date = y + '-' + m + '-' + d;
                    if (num == 1) {
                        this.startTime = date;
                        this.showStartTime = t;
                        this.getSelectedDate(this.startTime);
                    } else {
                        this.endTime = date;
                        this.showEndTime = t;
                    }
                    this.renderResultBox();
                }).catch(() => {

                })
            },

摘官网一段解释：

“为什么 appName 要以 $ 开头？这很重要吗？它会怎样？”

这里没有什么魔法。$ 是在 Vue 所有实例中都可用的属性的一个简单约定。这样做会避免和已被定义的数据、方法、计算属性产生冲突。

“你指的冲突是什么意思？”

另一个好问题！如果你写成：

Vue.prototype.appName = 'My App'

那么你希望下面的代码输出什么呢？

new Vue({
  data: {
    // 啊哦，`appName` *也*是一个我们定义的实例属性名！😯
    appName: 'The name of some other app'
  },
  beforeCreate: function () {
    console.log(this.appName)
  },
  created: function () {
    console.log(this.appName)
  }
})

日志中会先出现 "My App"，然后出现 "The name of some other app"，因为 this.appName 在实例被创建之后被 data 覆写了。我们通过 $ 为实例属性设置作用域来避免这种事情发生。你还可以根据你的喜好使用自己的约定，诸如 $_appName 或 ΩappName，来避免和插件或未来的插件相冲突。

当然有的同学不是了解vue 有这种使用的情况下，那么建议使用 require/import 来替换就好了（大型项目使用它就比较好维护）。

最后编辑于：2019.11.11 17:18:55