1. 程式人生 > >vue全域性方法和屬性的註冊

vue全域性方法和屬性的註冊

根據JavaScript原型鏈的原理,我們可以將全域性變數和方法掛在在Vue的父類上,即使用Vue.prototype來掛載。
例如我們想講一個路由跳轉方法toPath能夠全域性使用,但又不想每個元件去宣告定義一遍,那我們就直接將其掛在Vue.prototype上。
我們在main.js宣告Vue時將其掛載上:

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

Vue.config.productionTip = false

/* eslint-disable no-new */
Vue.prototype.toPath = function
(path) { this.$router.push(path); }; new Vue({ el: '#app', router, components: { App}, template: '<App/>' });

這時候我們就可以在別的元件直接呼叫了,而不需要額外的宣告,如下兩種呼叫方法。

<template>
  <div class="align-content-center">
    <p>部落格地址
      <!--<button type="button" class="close" aria-hidden="true" @click="jump">-->
<button type="button" class="close" aria-hidden="true" @click="toPath('/')"> &times; </button> https://blog.csdn.net/qq_36666651?ref=toolbar </p> </div> </template> <script> export default { name: "blog", methods: { jump: function
() {
this.toPath("/"); } } }
</script> <style scoped></style>