时间戳

首页 > 解决方案 > 使用父子组件中的 js 辅助函数

vue.js - 使用父子组件中的 js 辅助函数

问题描述

我有一个父组件（比如CustomerOrder）和一个子组件（比如OrderLine）。在CustomerOrder.vue中，我将OrderLine 通过遍历数组来包含多个。我有一个需要在CustomerOrder和中使用的辅助 js 函数OrderLine。我可以导入这个js文件CustomerOrder并调用js函数。但是我无法导入 js 文件，因为在调用函数时OrderLine它会给出错误（ ）。vue.runtime.esm.js?2b0e:1888 TypeError: _vm.formatNumber is not a function我的要求是使用父级和多个相同类型的子级的辅助 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>

OrderLine.vue：

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

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

vue.runtime.esm.js?2b0e:1888 TypeError: _vm.formatNumber is not a functionformatNumber在调用 OrderLine时引发。是不是因为

供参考：

实用程序.js：

import Numbro from 'numbro'

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

标签： vue.jsvue-component

解决方案

你应该添加（定义formatNumber）methods喜欢

methods: {
  formatNumber
}

否则你不能在模板中使用它

您也可以检查https://vuejs.org/v2/guide/filters.html并添加formatNumber到filters而不是methods. 然后在模板中使用 {{ 2300 | formatNumber }}

推荐阅读