vue添加实例属性

2019独角兽企业重金招聘Python工程师标准>>>

你可能会在很多组件里用到数据/实用工具，但是不想污染全局作用域。这种情况下，你可以通过在原型上定义它们使其在每个 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>

 

 

转载于:https://my.oschina.net/u/3946362/blog/1999043