<think>
我们已经在之前的回答中介绍了如何在
Vue 3的main
.js中
引入公共方法
并在组件的setup函数中
使用。但是，用户现在特别询问如何在“
页面的
HTML里”
使用这些公共方法，这意味着用户可能希望在模板中直接调用这些方法，而不通过setup中的函数代理。
在
Vue 3中，组件的模板中可以直接
使用在setup中返回的方法或数据。但是，如果我们全局挂载的方法，在模板中直接
使用全局方法名是不行的，因为模板只能访问到setup返回的对象、组件实例上暴露的属性（如props、emits）以及全局属性（通过`app
.config
.globalProperties`挂载的）但是需要以`$`开头的方式访问。
然而，在模板中直接调用全局方法，通常我们有两种方式：
1
. 在setup函数中，将全局方法返回给模板，然后在模板中通过返回的方法名调用。
2
. 直接在模板中通过`$`开头的全局属性调用。
但是注意：在模板中直接调用全局方法，需要确保该方法不会引起副作用（比如修改响应式数据）或者需要在方法调用处
使用括号，因为
Vue模板中调用方法必须
使用括号（除非是事件监听）。
但是，用户希望的是在
HTML（即模板）中
使用，所以我们重点说明如何在模板中直接
使用。
步骤：
1
. 在main
.js中全局挂载公共方法（如之前所述）。
2
. 在组件的setup函数中，我们不需要返回这些方法，因为我们可以直接在模板中通过`$`访问全局属性。但是，由于
Vue 3的模板中只能访问到全局属性（以`$`开头）和setup返回的属性，所以我们可以直接在模板中
使用`$common`（假设我们挂载的对象名为`$common`）来调用方法。
然而，这里有一个关键点：在模板中，我们可以这样写：
<button @click="$common
.showMessage(&#
39;Hello&#
39;)">点击</button>
但是，如果我们需要在模板的表达式中
使用（比如插值表达式{{ }}），那么要注意，插值表达式是求值
并输出，所以我们可以调用一个返回字符串的方法，例如：
<p>{{ $common
.formatDate(new Date()) }}</p>
但是，在插值表达式中调用方法通常不是最佳实践，因为它可能导致频繁执行（比如在重新渲染时），所以对于需要根据响应式数据变化而变化的场景，建议在setup中调用方法
并返回结果。
另外，注意在模板中调用方法时，如果方法返回的是Promise，那么插值表达式会显示[object Promise]，所以避免在插值表达式中
使用异步方法。
因此，总结在
页面HTML（模板）中
使用全局公共方法的步骤：
步骤1：创建公共方法
文件（如utils/common
.js）
步骤2：在main
.js中挂载到全局属性
步骤
3：在组件的模板中，通过`$`后跟挂载的属性名（如`$common`）来调用方法，注意：
- 在事件绑定中可以直接
使用，如@click="$common
.methodName(params)"
- 在插值表达式中
使用需要谨慎，确保方法执行是轻量的，且返回值是字符串或数字等。
示例代码：
main
.js:
```javascript
import { createApp } from &#
39;
vue&#
39;;
import App from &#
39;
./App
.vue&#
39;;
import commonMethods from &#
39;
./utils/common
.js&#
39;;
const app = createApp(App);
app
.config
.globalProperties
.$common = commonMethods;
app
.mount(&#
39;#app&#
39;);
```
在组件Home
.vue的模板中：
```
vue
<template>
<div>
<!-- 在事件中
使用 -->
<button @click="$common
.showMessage(&#
39;Hello from template!&#
39;)">显示消息</button>
<!-- 在插值表达式中
使用 -->
<p>当前时间: {{ $common
.formatDate(new Date()) }}</p>
</div>
</template>
```
注意：如果公共方法需要访问组件的上下文（比如this），那么这种方法不适用，因为全局方法中的this指向的是全局属性对象（即app
.config
.globalProperties），而不是组件实例。因此，我们通常将公共方法设计为纯函数，不依赖this。
另外，关于TypeScript支持，如果
使用TypeScript，我们需要扩展ComponentCustomProperties类型，以便在模板中调用时获得类型提示。但用户没有提到TypeScript，这里不展开。
最后，关于错误处理：在模板中调用全局方法，如果方法内部有错误，
Vue会将其捕获
并输出到控制台，但不会阻断整个应用。建议在公共方法内部做好错误处理。
因此，用户的问题解答如下：
</think>在
Vue 3 中，您可以通过以下步骤在 `main
.js` 中
引入公共方法
并在
页面 HTML 模板中直接
使用这些方法：
### 完整实现步骤
#### 1
. 创建公共方法
文件
在 `src/utils` 目录下创建 `common
.js`
文件：
```javascript
// src/utils/common
.js
// 公共方法示例
export function formatPrice(price) {
return `¥${price
.toFixed(2)}`
}
export function truncateText(text, maxLength = 20) {
return text
.length > maxLength ? `${text
.substring(0, maxLength)}
...` : text
}
// 导出所有方法
export default {
formatPrice,
truncateText
}
```
#### 2
. 在 `main
.js` 中全局挂载方法
```javascript
// src/main
.js
import { createApp } from &#
39;
vue&#
39;
import App from &#
39;
./App
.vue&#
39;
import commonMethods from &#
39;@/utils/common&#
39; //
使用路径别名
const app = createApp(App)
// 挂载全局方法（添加 $ 前缀避免命名冲突）
app
.config
.globalProperties
.$utils = commonMethods
app
.mount(&#
39;#app&#
39;)
```
####
3. 在组件模板中直接
使用
在
Vue 组件的 `<template>` 部分直接调用全局方法：
```
vue
<!-- src/components/ProductCard
.vue -->
<template>
<div class="product-card">
<h
3>{{ $utils
.truncateText(product
.name, 15) }}</h
3>
<p class="price">{{ $utils
.formatPrice(product
.price) }}</p>
<button @click="$utils
.showMessage(`已添加${product
.name}`)">购买</button>
</div>
</template>
<script>
export default {
props: [&#
39;product&#
39;]
}
</script>
```
### 关键说明
1
. **全局属性访问**：
- 通过 `app
.config
.globalProperties` 挂载的方法可在任何组件模板中通过 `$` 前缀访问
- 在模板中直接
使用 `$utils
.methodName()` 语法调用
2
. **模板中的
使用场景**：
- **文本格式化**：`{{ $utils
.formatPrice(item
.price) }}`
- **条件处理**：`:class="{ active: $utils
.isActive(item) }"`
- **事件处理**：`@click="$utils
.handleClick(item)"`
- **属性绑定**：`:title="$utils
.truncateText(description)"`
3. **方法设计注意事项**：
```javascript
// 推荐：纯函数设计
export function formatDate(date) {
return new Date(date)
.toLocaleDateString()
}
// 不推荐：避免在方法中直接操作DOM
export function showMessage(message) {
// 良好实践：
使用Vue的响应式系统而非直接DOM操作
console
.log(message) // 替代 alert(message)
}
```
4
. **路径别名配置**（如遇导入问题）：
在项目根目录创建 `jsconfig
.json`：
```json
{
"compilerOptions": {
"baseUrl": "
./",
"paths": {
"@/*": ["src/*"]
}
},
"exclude": ["node_modules", "dist"]
}
```
### 最佳实践建议
1
. **命名规范**：
- 全局方法
使用 `$` 前缀（如 `$utils`）
- 方法名采用 camelCase 命名（如 `formatPrice`）
2
. **方法设计原则**：
- 保持方法纯净（无副作用）
- 避免在方法中直接修改组件状态
- 复杂逻辑建议
使用组合式函数（Composables）
3. **性能优化**：
```
vue
<!-- 避免在v-for中频繁调用复杂方法 -->
<template>
<!-- 不推荐 -->
<div v-for="item in list" :key="item
.id">
{{ $utils
.complexCalculation(item) }}
</div>
<!-- 推荐：预先计算 -->
<div v-for="item in computedList" :key="item
.id">
{{ item
.calculatedValue }}
</div>
</template>
```
4
. **组合式API替代方案**（适用于复杂场景）：
```
vue
<script setup>
import { useUtils } from &#
39;@/composables/utils&#
39;
const { formatPrice } = useUtils()
</script>
<template>
<p>{{ formatPrice(99
.99) }}</p>
</template>
```
### 常见问题解决
**问题：模板中调用方法报未定义错误**
- 检查 `main
.js` 中是否正确挂载：`app
.config
.globalProperties
.$utils =
...`
- 确保方法名前有 `$` 前缀
- 验证方法是否在 `common
.js` 中正确导出
**问题：方法内无法访问组件上下文**
- 全局方法中避免
使用 `this`，通过参数传递所需数据
- 需要组件上下文时，改用组件本地方法或组合式函数
> 通过这种模式，您可以在
Vue 3 项目中高效地在模板中直接
使用全局公共方法，同时保持代码的可维护性和可读性。对于需要访问组件状态或生命周期的复杂逻辑，建议
使用组合式 API 替代全局方法[^1][^
3]。
本文介绍如何在基于.html的传统项目中，利用Vue.js作为渲染工具，通过公共组件减少重复代码，提高开发效率。详细解释了如何将常用header和footer提取为独立.js文件，并在多个页面中复用。
扫一扫
3640
到【灌水乐园】发言
