vue3的hook函数

尘珩

已于 2022-04-30 11:04:44 修改

阅读量833

点赞数 2

分类专栏： vue3 文章标签： vue.js

于 2022-04-30 10:04:29 首次发布

本文链接：https://blog.csdn.net/m0_58656423/article/details/124509099

版权

vue3 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

自定义hook函数

在这里插入图片描述

使用方法
- 创建hooks文件夹
- 创建函数文件
- 暴露函数
- 引入使用
使用组合式API进行封装
$* [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WtJ1zlUY-1651284095680)(C:\Users\44338\AppData\Roaming\Typora\typora-user-images\image-20220305205643245.png)]$

import {reactive,onMounted,onBeforeUnmount} from "vue"
export default function(){
    let point=reactive({
    x:0,y:0
  })
  function m1(event){
    point.x=event.pageX 
    point.y=event.pageY
  }
  onMounted(()=>{
    window.addEventListener('mouseover',m1)
  })
  onBeforeUnmount(() => {
      window.removeEventListener('mouseover',m1)
  })
  return point
}

//HelloWord.vue


<template>
  <div class="hello">
    <h1>姓名：<input type="text" v-model="person.name"></h1>
    <h1>地址：<input type="text" v-model="person.address"></h1>
    <h1>{{person.message}}</h1>
    <button @click="person.name+=`~`">姓名按钮</button>
  </div><br>
  <h1>当前坐标为x:{{point.x}},y:{{point.y}}</h1>
</template>

<script>
import { reactive } from '@vue/reactivity'
import usepoint from "../hooks/usePoint"
export default {
  name: 'HelloWorld',
  setup() {
    let person=reactive({
      name:"魈" ,address:"璃月",job:{j1:{salary:2000}}
    }) 
    let point=usepoint()
    return {person,point}
  }
 
}
</script>