Question

我有一些小的功能，需要在许多组件中使用。这些函数仅对数据和返回值进行一些计算，并且与应用程序的其余部分无关。我应该将这些功能放在主目录的JS文件中，还是有Vue的方法来完成此操作？

Answer 1

您可以将这些函数放在全局JS文件中，但这是一些替代方法。

将该函数定义为父Vue组件的方法，您可以通过this.$parent.method();访问它。

您可以使用Vuex存储，如果您有很多嵌套的子组件都在访问该方法，这肯定会更容易。

state: {
    data: 'hi',
},
getters: {
    data(state){
        return Array.from(state.data).reverse().join('');
    }
}

Answer 2

您可以在全局js文件中定义函数（例如'functions.js'），也可以在主Vue的methods属性中定义它们：

# functions.js
export function message(value) {
  return 'hello ' + value
}

# and/or

# main.js
new Vue({
  el: "#app",
  components: { App },
  template: "<App/>",
  methods: {
    superMessage(value) {
      return 'super hello ' + value 
    }
  }
});

然后在任何组件中使用以下功能：

<template>
  <div>
    <p>{{ message('world') }}</p> <!-- "hello world" -->
    <p>{{ $root.superMessage('world') }}</p> <!-- "super hello world" -->
  </div>
</template>

<script>
  import { message } from "./functions"
  export default {
    methods: {
      message
    }
  };
</script>

在VueJS中使用全局帮助器功能

2 个答案: