vue 定義以及使用全局函數方法

定義全局函數:(在app.vue上去注入)

provide() {
    return {
      reload: this.reload
    }
  },

使用全局函數

inject: ['reload']

在js中直接使用

this.reload();

如果在html中直接使用要在本頁面中用本頁面的函數去重寫

定義栗子:

<template>
<div id="app">
  <router-view />
</div>
</template>
<script>
export default {
  name: 'app',
  provide() {//定義全局
    return {
      reload: this.reload
    }
  },
  data() {
    return {
    }
  },
  created() {
  },
  mounted() {
  },
  methods: {
    reload() {
        //方法
    }
  }
}
</script>
<style lang="less">
</style>

使用栗子:

<template>
<div id="used">
  <button @click="reload_Tow"></button>
</div>
</template>
<script>
export default {
  inject:['reload'],//引入方法
  name: 'app',
  data() {
    return {
    }
  },
  created() {
  },
  mounted() {
  },
  methods: {
    reload_Tow() {//本方法
        this.reload()//引用全局注入的方法
    }
  }
}
</script>
<style lang="less">
</style>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章