在
Vue 2 中
封装公共方法可以通过以下几种
方式实现：
### 创建
公共方法文件
首先创建一个 `utils
.js` 文件，在其中定义多个导出的函数，这些函数为纯函数，接收输入并返回结果，不依赖
Vue 的内部状态。示例代码如下：
```
javascript
// utils
.js
export function formatDate(date) {
// 实现日期格式化逻辑
return new Intl
.DateTimeFormat()
.format(date);
}
export function sumArray(arr) {
// 实现数组求和逻辑
return arr
.reduce((acc, val) => acc + val, 0);
}
```
在
Vue 组件中使用
公共方法时，通过 `import` 语句导入
公共方法，在 `methods` 选项中调用它们。示例代码如下：
```
vue
<template>
<div>
<p>Formatted Date: {{ formattedDate }}</p>
<p>Sum of Array: {{ arraySum }}</p>
</div>
</template>
<script>
import { formatDate, sumArray } from &#
39;
./utils
.js&#
39;;
export default {
data() {
return {
currentDate: new Date(),
array: [1, 2,
3, 4, 5]
};
},
computed: {
formattedDate() {
return formatDate(this
.currentDate);
},
arraySum() {
return sumArray(this
.array);
}
}
};
</script>
```
### 创建
Vue 插件
创建一个 `plugin
.js` 文件，将
公共方法作为
Vue 插件导出。`install` 函数接收
Vue 实例 `
Vue`，并使用 `
Vue.prototype` 将
公共方法挂载到
Vue 实例上。示例代码如下：
```
javascript
// plugin
.js
import { formatDate, sumArray } from &#
39;
./utils
.js&#
39;;
const MyPlugin = {
install(
Vue) {
Vue.prototype
.$formatDate = formatDate;
Vue.prototype
.$sumArray = sumArray;
}
};
export default MyPlugin;
```
在 `main
.js` 中，通过 `
Vue.use(MyPlugin)` 注册
插件，使其在整个
Vue 应用中可用。示例代码如下：
```
javascript
// main
.js
import
Vue from &#
39;
vue&#
39;;
import App from &#
39;
./App
.vue&#
39;;
import MyPlugin from &#
39;
./plugin
.js&#
39;;
Vue.use(MyPlugin);
new
Vue({
render: h => h(App)
})
.$mount(&#
39;#app&#
39;);
```
在组件中，可以使用 `this
.$formatDate` 和 `this
.$sumArray` 调用这些
方法，利用
Vue 的原型链机制。示例代码如下：
```
vue
<template>
<div>
<p>Formatted Date: {{ $formatDate(currentDate) }}</p>
<p>Sum of Array: {{ $sumArray(array) }}</p>
</div>
</template>
<script>
export default {
data() {
return {
currentDate: new Date(),
array: [1, 2,
3, 4, 5]
};
}
};
</script>
```
最低0.47元/天 解锁文章
扫一扫
838
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
