腾轩资源网 - 专注优质QQ活动-绿色软件-游戏辅助-技术教程分享网!

vue3中hooks的使用方法教程

腾轩资源网 编程资源
扫码手机访问
0

vue3中的hooks是,类似于vue2中的mixin,但是不同的是,vue3的hooks是一个函数,可以帮助我们去复用一些重复的代码,提升开发效率。

计数器 hook

1、定时器

src下新建hook目录,新建useCounter.js,src --> hook --> useCounter.js,在需要用到的组件中引入并调用函数。

import { ref } from "vue";  // 使用ref定义响应式数据
export default function () { // 默认抛出一个函数,hooks本质就是一个函数
  let counter = ref(0); // 定义计数器为0
  // 点击事件 将定时器++
  function clickNum() {
    counter.value++;
  }
  // 一定要return 出去 否则无法使用
  return { counter, clickNum };
}

2、拿到函数的返回值,src --> App.vue

import useCounter from "./hook/usePageNum";
export default{
    setup(){
      //执行useCounter函数,拿到counter,clickNum
      let {counter,clickNum} = useCounter()
      return {
          // 模板中使用,需要return 出去
          counter,
          clickNum
      }
    }
}

<template>
    <div>{{ counter }}</div>
    <div>
    <button @click="clickNum">counter++</button>
    </div>
</template>

至此,计数器hook实现,下面我们来实现点击当前页面获取鼠标的坐标。

3、点击页面获取x,y轴坐标,src下新建hook目录,新建useCoordinates.js,src --> hook --> useCoordinates.js

import { ref } from "vue";
export default function () {
  // 保存x,y轴的坐标位置
  let x = ref("");
  let y = ref("");

  // 鼠标点击事件
  window.addEventListener("click", (e) => {
    x.value = e.pageX;
    y.value = e.pageY;
  });

  return {
    x,
    y,
  };
}

src --> App.vue

<template>
  <div>x坐标:{{ x }},y坐标:{{ y }}</div>
</template>

<script>
import useCoordinates from "./hook/useCoordinates.js";
export default {
  setup() {
    let { x, y } = useCoordinates();
    return {
      x,
      y,
    };
  },
};
</script>

标签:

暂无标签
    协助本站seo优化一下,谢谢!
    关键词不能为空

免责声明:

本站提供的资源,都来自网络,版权争议与本站无关,所有内容及软件的文章仅限用于学习和研究目的。不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负,我们不保证内容的长久可用性,通过使用本站内容随之而来的风险与本站无关,您必须在下载后的24个小时之内,从您的电脑/手机中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。侵删请致信E-mail: 571533527@qq.com

同类推荐
分享
评论列表
签到
编程资源 vue3中hooks的使用方法教程
vue3中的hooks是,类似于vue2中的mixin,但是不同的是,vue3的hooks是一个函数,可以帮助我们去复用一些重复的代码,提升开发效率。 ...
扫描二维码阅读原文
腾轩资源网 January, 01
初始化 ×