Vue.js 使用父组件和子组件中的js helper函数

我有一个父组件（比如，

CustomerOrder

）和一个子组件（比如，

OrderLine

）。在

CustomerOrder.vue

中，我将通过迭代数组来包含多个

OrderLine

。我有一个helper js函数，需要在

CustomerOrder

和

OrderLine

中使用。我可以在

CustomerOrder

中导入这个js文件并调用js函数。但是我无法在命令行中导入js文件，因为调用函数时会出现错误（

vue.runtime.esm.js？2b0e:1888 TypeError:_vm.formatNumber不是函数

）。我的要求是从父级和同一类型的多个子级使用helper js函数

客户订单.vue：

<template>
    <span class="caption">{{ formatNumber(1500) }} LKR</span>
    <v-layout wrap>
      <order-line v-for="line in orderLines" :key="line.id" :general_data="line"></order-line>
    </v-layout>
</template>

<script>
    import { formatNumber } from '../utils'
</script>

<template>
    <span class="caption">{{ formatNumber(2300) }} LKR</span>
</template>

<script>
    import { formatNumber } from '../utils'
</script>

import Numbro from 'numbro'

export function formatNumber (value, numberOfDecimals) {
  return Numbro(value).format({
    thousandSeparated: true,
    trimMantissa: true,
    mantissa: numberOfDecimals
  })
}

您应该在

方法中添加（定义）
formatNumber
，如

methods: {
  formatNumber
}

否则不能在模板中使用它

此外，您还可以检查
formatNumber
并将其添加到
filters
而不是
方法
。然后在模板中使用
{{2300 | formatNumber}
您应该在
方法中添加（定义）
formatNumber

methods: {
  formatNumber
}

否则不能在模板中使用它

此外，您还可以检查
formatNumber
并将其添加到
filters
而不是
方法
。然后在模板中使用
{{2300 | formatNumber}
您能在使用导入的
formatNumber
时包含代码吗？仅导入它不足以使其在模板中可用，它需要包含在
部分的某个地方，例如在
方法中
。我使用
导入{formatNumber}from'../utils'
导入两个组件中的js，如我上面所示，并将其用作
formatNumber（1500）
和
formatNumber（2300）
以及
CustomerOrder.vue
和
OrderLine.vue
位于同一目录中，对吗？是的，它们是…您可以在使用导入的
formatNumber
的地方包含代码吗？仅导入它不足以使其在模板中可用，它需要包含在
部分的某个地方，例如在
方法中
。我使用
导入{formatNumber}from'../utils'
导入两个组件中的js，如我上面所示，并将其用作
formatNumber（1500）
和
formatNumber（2300）
如上所示，以及
CustomerOrder.vue
和
OrderLine.vue
位于同一目录中，对吗？是的，它们是…我是vue新手，正在学习。您能告诉我如何在不复制代码的情况下在整个应用程序中使用帮助函数吗？如果您想在整个应用程序中使用此
过滤器
，那么您应该将其添加到定义Vue应用程序的
过滤器
（…
他不必在他的方法中添加它…我只是通过导入使用了许多函数…我认为问题出在其他地方我只是跟踪了你的链接，似乎我可以使用过滤器…不管怎样，如果有很多这样的过滤器，我可以将它们移动到单独的文件中吗？问这个问题，因为我想我会在不久的将来遇到它... :)当然，您可以创建过滤器文件，在其中导出多个过滤器，然后一次性导入所有过滤器，并设置为
过滤器
我是Vue新手，正在学习。您能告诉我如何在不复制代码的情况下在整个应用程序中使用帮助器功能吗？如果您想在整个应用程序中使用此
过滤器
，那么您可以应将其添加到定义Vue应用程序的过滤器中-
新Vue（…
他不必在他的方法中添加它…我只是通过导入使用了许多函数…我认为问题出在其他地方我只是跟踪了你的链接，似乎我可以使用过滤器…不管怎样，如果有很多这样的过滤器，我可以将它们移动到单独的文件中吗？问这个问题，因为我想我会在不久的将来遇到它…：）当然，您可以创建过滤器文件，在其中导出多个过滤器，然后一次导入所有过滤器并设置为
过滤器