vue添加实例属性

你可能会在不少组件里用到数据/实用工具，可是不想污染全局做用域。这种状况下，你能够经过在原型上定义它们使其在每一个 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 = false

Vue.prototype.$appName = 'hello world' //全局定义一个实例属性

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

HelloWorld.vue(这样就能够在各个vue实例中使用)

<template>
  <div class="hello">
   	<button @click="handleClick">按钮</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      appName: 'Welcome to Your Vue.js App'
    }
  },
  methods: {
  		handleClick(){
  			let data = this.$appName;
  			console.log('kkkk',data); // hello world
  		}
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

注意：在这里咱们能够看到，在用原型去定义一个实例属性的时候，咱们在属性名的前方加了一个 '$'，好比咱们刚才定义的属性名'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 = false

Vue.prototype.appName = 'hello world' //全局定义一个实例属性

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

HelloWorld.vue

<template>
  <div class="hello">
   	<button @click="handleClick">按钮</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      appName: 'Welcome to Your Vue.js App'
    }
  },
  methods: {
  		handleClick(){
  			let data = this.appName;
  			console.log('kkkk',data); // Welcome to Your Vue.js App
  		}
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

从上面咱们能够看出打印的结果是不同的，由于全局定义的属性名与实例中定义的属性名是相同的，因此你获得的只是各个实例中的数据，而不是全局中想要获得的数据，因此为了区别开才要加个‘$’,加什么不重要，是随意的，重要的是避免冲突。

不是全局配置:

 HelloWorld.vue

<template>
  <div class="hello">
   	<button @click="handleClick">按钮</button>
  </div>
</template>

<script>
import Vue from 'vue'
Vue.prototype.$exe = { //定义一个属性
	num: '23'
}
export default {
  name: 'HelloWorld',
  data () {
    return {
      //appName:this.$exe.num 
    }
  },
  methods: {
  		handleClick(){
  			//let data = this.appName; //23
  			let data = this.$exe.num; //23
  			console.log('kkkk',data);
  		}
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>