7在Vue的原型对象里添加属性和方法

为什么要在Vue的原型对象里添加属性和方法

有时候为了方便组件使用同一个数据或者方法，可以定义在Vue的原型对象上，这样就是全局的了，所有组件都能够访问到。经常封装发送axios请求的方法为一个js文件。然后引入添加到Vue的原型对象上。这样发送请求很方便。而且维护方便。

在Vue的原型对象里添加属性和方法

在main.js里进行添加

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false;


Vue.prototype.testProperty='我是Vue原型对象上的属性';

Vue.prototype.testFunction=function(){
    return "我是Vue原型对象上的函数"
}

new Vue({
  render: h => h(App),
}).$mount('#app')

组件里进行访问

<template>
    <div>
        <h2>首页</h2>
        <button v-on:click="getPrototype">点我</button>
    </div>
</template>

<script>
export default{
    name:"Home",
    methods:{
        getPrototype(){            
            console.log(this.testProperty);//访问vue原型上的属性
            var result=this.testFunction();//调用vue原型上的方法
            console.log(result);
        }
    }
}
</script>

为啥在组件里通过this能访问？本来构造函数里没有。就会去访问原型，组件的原型对象里肯定也没有，应该是访问object的原型对象。然后就会找不到，然后就报错还是返回null。但是vue框架里对组件的VueComponent的构造函数的原型链进行了修改。使它去找Vue的原型对象。所以就能访问到Vue的原型对象了。