Question

我有一个名为Helper.js的文件，其中包含使用某些库的函数。现在我有一个TestComponent.vue文件，想要使用这个帮助函数。我该如何注入这些功能？

我尝试直接在“组件”块中使用Helper.js中使用的库，但似乎vue在包含任何库之前运行，而不管index.html标记的顺序如何。

如何使用.js文件或其他库

Answer 1

为了在Vue模板中使用其他库或辅助函数，您只需将它们导入到模板的脚本标记中即可：

TestComponent.vue

<template>
<!-- template markup -->
</template>

<script>
import Helper from 'relative/path/to/Helper.js'
// or just a helper function (that should be exported accordingly
import { helperFunction } from 'relative/path/to/Helper.js'

export default {
   name: 'TestComponent'
   // component data, methods, etc are now able to use imported variables 
}
</script>

这样您就可以在组件中使用任何其他JS。 Webpack会将其包含在捆绑包中。但是，如果在许多组件中使用库，则维护或重复导入可能会变得不舒服。在这种情况下，可以在创建Vue实例的主应用程序文件中的Vue原型上定义库，这将使其可以从任何组件访问。

import moment from 'moment'; Object.definePrototype(Vue.prototype, '$moment', { value: moment });

请按照the article进行详细说明和更好的做法。

Answer 2

正确答案是：

首先，您需要导入库，以便定义属性。

<?php
if (!isset($_SESSION['keyphrase']) || !isset($_POST['keyphrase']) || $_POST['keyphrase'] != $_SESSION['keyphrase'])
{
    unset($_SESSION['keyphrase']);
    header("location: ".KICKBACK.URL);
    exit;
}
// UNSET IF YOU ONLY WANT TO ALLOW ACCESS ONCE
unset($_SESSION['keyphrase']);

// WELCOME

请注意，您应该使用define Property 而不是定义 Prototype 。

通过这种方式，您可以调用Vue：import moment from 'moment'; Object.defineProperty(Vue.prototype, '$moment', { value: moment });

在vue组件中使用普通的javascript文件？

2 个答案: