vue prototype

每一个组件都相当于是Vue的一个实例 所以有时候我们定义数据或者实用工具的时候并不想污染全局 就可以在vue.prototype上进行定义 使得它们在每个组件实例里都可以访问
Vue.prototype.$proName = 'pro_name'

  export default {
    data () {
      return {}
    },
    created () {
       console.log('this.$proName:',this.$proName) // this.$proName:pro_name
    }
  }

至于为什么一定要用$,其实并没有什么特定的规则,只不过是Vue.prototype的一个小约定,也可以用其他符号代替,如Vue.prototype.^proName = 'pro_name'
虽然没有什么特定规则，但不能舍弃不写，不然会和实例里定义的变量发生冲突：

Vue.prototype.proName = 'pro_name'
export default {
  data () {
    return {
      proName: '111'
    }
  },
  created () {
     console.log('prototype-proName:',this.proName) 
     console.log('page-proName:',this.proName) 
  }
}

上面的log会先打印出prototype-proName:pro_name然后出现page-proName:111，因为原型上的proName被实例data里面的proName覆盖掉了
所以用符号也可以称之作用域
值得注意的是一点是 Vue.prototype只是给每个组件加了一个变量 但它并不是全局的

index.vue
<tempalte>
  <div class="page_index">
     <el-button @click="toHomePage">toHomePage Button</el-button>
  </div>
</tempalte>
<script>
export default {
  data () {
    return {}
  },
  methods: {
    toHomePage() {
      this.$proName = "change_pro_name"
      this.$route.push('/home')
    }
  }
}
</script>

home.vue
<script>
export default {
  data () {
    return {}
  },
  created() {
    console.log(this.$proName) // pro_name
  }
}
</script>

如果实在想要实现全局功能，可以把值写成对象格式
Vue.prototype.&proName = { name: pro_name1 }
这样重复上述点击事件跳转以后home页面log的值就是index页面更改的值

通常来说原型可以获得实例里面的所有东西，也就是说可以通过this访问任何定义在实例上的东西
比如我们先在原型上定义一个方法，用该方法去访问实例里面定义的变量进行操作

Vue.prototype.$reverseText = function (txt) {
   this.txt = this.txt.split('').reverse().join('')
 }

// 组件
<script>
export default {
  data () {
    return {
      txt: 'hello'
    }
  },
  created () {
    console.log(this.$reverseText(this.txt)) // olleh
  } 
}
</script>

最直观的原型方法就是我们常用的$axios

// mian.js
Vue.prototype.$axios = axios

// 组件
this.$axios({
  method: 'post',
  url: url,
  data: data
}).then((response) =>{
  console.log(response) //请求成功返回的数据
}).catch((error) =>{
  console.log(error) //请求失败返回的数据
})