+
89
-

回答

在uniapp中,要在export default外部调用内部methods方法,有以下几种方式:

使用getCurrentPages()获取页面实例:
<template>
  <div>
  </div>
</template>

<script>
// 在外部定义方法调用
function callPageMethod() {
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1];
  currentPage.sayHello(); // 调用页面内的方法
}

export default {
  methods: {
    sayHello() {
      console.log('Hello');
    }
  }
};
</script>
使用getApp()全局实例:
<template>
  <div>
  </div>
</template>

<script>
// 获取应用实例
const app = getApp();

// 在外部定义方法
function callMethod() {
  const vm = app.globalData.pageInstance;
  vm.sayHello();
}

export default {
  onLoad() {
    // 将页面实例保存到全局
    app.globalData.pageInstance = this;
  },
  methods: {
    sayHello() {
      console.log('Hello');
    }
  }
};
</script>
使用this.$refs调用子组件方法:
<template>
  <div>
    <child-component ref="childRef"/>
  </div>
</template>

<script>
// 外部方法
function callChildMethod() {
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1];
  currentPage.$refs.childRef.sayHello();
}

export default {
  methods: {
    sayHello() {
      console.log('Hello');
    }
  }
};
</script>
使用Vue.prototype挂载全局方法:
<template>
  <div>
  </div>
</template>

<script>
import Vue from 'vue'

// 在main.js中定义全局方法
Vue.prototype.$globalMethod = function() {
  const pages = getCurrentPages()
  const currentPage = pages[pages.length - 1]
  currentPage.sayHello()
}

export default {
  methods: {
    sayHello() {
      console.log('Hello');
    }
  }
};
</script>
使用Vuex管理状态:
<template>
  <div>
  </div>
</template>

<script>
import { mapActions } from 'vuex'

// 在store中定义action
export const store = new Vuex.Store({
  actions: {
    callPageMethod({ state, commit }) {
      const pages = getCurrentPages()
      const currentPage = pages[pages.length - 1]
      currentPage.sayHello()
    }
  }
})

export default {
  methods: {
    ...mapActions(['callPageMethod']),
    sayHello() {
      console.log('Hello');
    }
  }
};
</script>

网友回复

我知道答案,我要回答