vue3函数交互代码封装和调用，vue2同理

农夫三拳有点疼=-=

已于 2022-03-20 11:19:17 修改

阅读量3.2k

点赞数 2

文章标签： vue.js 前端 javascript

于 2022-03-20 11:14:59 首次发布

本文链接：https://blog.csdn.net/m0_64207574/article/details/123609523

版权

本文介绍如何在Vue3中通过封装方法提升页面交互逻辑的可维护性。首先，创建一个JS文件，将交互逻辑封装成函数并导出。接着，在需要的组件中导入并调用此函数，利用vue3的setup方法返回值。示例中展示了如何封装鼠标点击获取坐标的功能，并在模板中展示坐标值。

摘要由CSDN通过智能技术生成

在项目当中，我们一般都会有很多的交互逻辑，都写在一个页面导致页面非常多，不好维护和整理，还很乱，下面教如何去封装一个方法和调用

这里来个简单的需求，点击页面，获取对应的坐标，这里用vue3来写，（vue2就是生命周期的使用不同）

思路：

1，首先创建一个js文件。将你写好的一个逻辑交互放进去，并应一个函数将其封装起来，最后得出来的值记得一定要return返还出来；

2，然后将这个封装好的函数export defur导出；

注意：vue3一定要在这个页面导入你需要的API组件，vue2导入你需要的数据

导入API组件
import {  reactive, onMounted, onBeforeUnmount } from "vue";
将方法都封装到一个函数里
function savePoints() {
    // 实现鼠标点击坐标数据
    let point = reactive({
        x: 0,
        y: 0,
      });
      // 将坐标位置的封装起来在进行监听和删除，
    //   执行的方法
      function savePoint(event) {
        console.log(event.pageX, event.pageY);
        point.x = event.pageX;
        point.y = event.pageY;
      }
      // 创建点击监听事件
      onMounted(() => {
        window.addEventListener("click", savePoint, true);
      });
      //优化删除
      onBeforeUnmount(() => {
        window.removeEventListener("click", savePoint);
      });
    //   交出返回值
      return point
  }
//   交出去
  export default savePoints;

3，在自己需要的页面中先将该文件导入，然后再页面中直接调用，这里一定要注意拿个变量来接，因为你的封装函数是由返回值的；

4，vue3中直接再setup钩子函数中返回出去这个返回值即可调用，vue2可以直接调用这个承接的变量

template>
  <div>
    <h1>自定义Hook函数</h1>
    <p>我的：{{ sum }}元</p>
    <button @click="sum++">按钮</button>
    <hr />
    <h2>当前点击时的鼠标的坐标为:X轴:{{ point.x }};Y轴:{{ point.x }}</h2>
  </div>
</template>

<script>
import { ref} from "vue";//vue3的方法，vue2不用写
import usePoint from '../Hooks/usehooks'
export default {
  name: "Hook",
// 使用Hook进行封装,在组件中的Hooks里面的js封装
setup是vue3的方法，vue2写在自己的mothods里面
setup() {
    const sum = ref(0);
    //调用封装的函数,并将返回值赋值给一个变量接收
    let point = usePoint();
    return {return也是是vue3的方法
      sum,
      point,
    };
  },
};
</script>

<style>
</style>