vue添加实例属性-白红宇

vue添加实例属性

阅读量：6088 次

发布时间：2019-06-20

本文共 1449 字，大约阅读时间需要 4 分钟。

你可能会在很多组件里用到数据/实用工具，但是不想。这种情况下，你可以通过在原型上定义它们使其在每个 Vue 的实例中可用。
Vue.prototype.$appName = 'My App'

假如我们全局定义一个实例属性，这样就可以在所有vue实例中使用。

例如：

main.js
// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.import Vue from 'vue'import App from './App'import router from './router'Vue.config.productionTip = falseVue.prototype.$appName = 'hello world' //全局定义一个实例属性/* eslint-disable no-new */new Vue({  el: '#app',  router,  components: { App },  template: '
     '})
HelloWorld.vue(这样就可以在各个vue实例中使用)
     
     
注意：在这里我们可以看到，在用原型去定义一个实例属性的时候，我们在属性名的前方加了一个 '$'，比如我们刚才定义的属性名'appName'的前方就有一个'$'，其实这么做的目的就是：避免与在各个vue实例中已定义相同名称的属性发生冲突。

假如我们不加'$'，会发生什么情况呢？

main.js
// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.import Vue from 'vue'import App from './App'import router from './router'Vue.config.productionTip = falseVue.prototype.appName = 'hello world' //全局定义一个实例属性/* eslint-disable no-new */new Vue({  el: '#app',  router,  components: { App },  template: '
     '})
HelloWorld.vue
     
     
从上面我们可以看出打印的结果是不一样的，因为全局定义的属性名与实例中定义的属性名是相同的，所以你得到的只是各个实例中的数据，而不是全局中想要得到的数据，所以为了区别开才要加个‘$’,加什么不重要，是随意的，重要的是避免冲突。