Comment définir des variables globales et des méthodes globales dans vue ? (code)

Cet article vous présente comment définir des variables globales et des méthodes globales dans Vue ? (code), il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

1. Fichier d'importation global

1. Définissez d'abord le composant commun common.vue

<script type="text/javascript">
    // 定义一些公共的属性和方法
    const httpUrl = 'http://39.105.17.99:8080/'
    function commonFun() {
        console.log("公共方法")
    }
    // 暴露出这些属性和方法
    export default {
        httpUrl,
        commonFun
    }
</script>

2. utilisez-le 🎜>

3. Utilisez

<script>
// 导入共用组件
import global from './common.vue'
export default {
  data () {
    return {
      username: '',
      password: '',
      // 赋值使用
      globalHttpUrl: global.httpUrl
    }
  },

2. Introduisez les variables et méthodes globales dans main.js

<template>
    {{globalHttpUrl}}
</template>

1 Définissez les composants partagés comme ci-dessus

2. dans main.js Et copiez dans vue

3. Utilisez

// 导入共用组件
import global from './common.vue'
Vue.prototype.COMMON = global

export default {
  data () {
    return {
      username: '',
      password: '',
      // 赋值使用, 可以使用this变量来访问
      globalHttpUrl: this.COMMON.httpUrl
    }
  },

pour résumer l'instance

fichier common.vue, public dans le projet ou fichier global
vue-resource doit d'abord configurer main.js

// 配置使用formDate
Vue.http.options.emulateHTTP = true
Vue.http.options.emulateJSON = true

<script type="text/javascript">
// 定义一些公共的属性和方法
const httpUrl = 'http://39.105.17.99:8080/'
function promiseFun (url, params) {
  return new Promise((resolve, reject) => {
    this.$http.post(this.globalHttpUrl + url, params).then(
      (res) => {
        resolve(res.json())
      },
      (err) => {
        reject(err.json())
      }
    )
  })
}
// 暴露出这些属性和方法
export default {
  httpUrl,
  promiseFun
}
</script>

pour utiliser

Articles connexes recommandés :

export default {
  data () {
    return {
      username: '',
      password: '',
      globalHttpUrl: global.httpUrl,
      promiseFun: global.promiseFun
    }
  },
  methods: {
    loginInFun () {
      localStorage.setItem('userId', '00001')
      let params = {
        telphone: this.username,
        password: this.password
      }
      this.promiseFun('itArtison/user/login', params).then(
        (res) => {
          console.log(res)
          this.$Message.info(res.message)
          // 登录成功过以后，这里从初session
          // 先将对象转换为json字符串
          localStorage.setItem('userInfo', JSON.stringify(res.data))
          if (res.code === '0000') {
            this.$router.push({'name': 'Home'})
          }
        },
        (err) => {
          console.log(err)
          this.$Message.info(err.message)
        }
      )
    }
  }

Comment monter des composants vue globalement ? Introduction à la méthode de montage global des composants Vue (code)

Explication détaillée des variables globales et des fonctions globales définies dans le projet vue

À propos Explication détaillée de plusieurs méthodes de définition de variables globales dans VUE

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!