文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Vue3通过ref操作Dom元素及hooks的使用方法是什么

2023-07-05 01:09

关注

这篇文章主要介绍了Vue3通过ref操作Dom元素及hooks的使用方法是什么的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇Vue3通过ref操作Dom元素及hooks的使用方法是什么文章都会有所收获,下面我们一起来看看吧。

Vue3 ref获取DOM元素

<div ref="divBox">Hello</div>
import {ref,onMounted} from 'vue'
  setup() {    const divBox = ref(null);     onMounted(()=>{        console.log(divBox.value);     })    return{divBox}  }

Vue3通过ref操作Dom元素及hooks的使用方法是什么

父组件监听子组件中的元素

 在父组件中的子组件里会打印一个proxy(实例),通过实例去获取里面的属性或者值

setup() {      const commer = ref(null)      onMounted(()=>{          console.log(commer);          console.log(commer.value);      })      return {          commer      }  }

Vue3通过ref操作Dom元素及hooks的使用方法是什么

看这个例子:

父组件:

<template>  <div class="about">    <h2>This is an about page</h2>    <com ref="commer"></com>    <h4>通过ref用父组件接收子组件中的宽和高:<span>{{numWidht}} {{numHeight}}</span></h4>   </div></template><script>import com from '../components/com.vue'import {ref,onMounted} from 'vue'export default {  components: {    com  },  setup() {      const commer = ref(null)      const numWidht = ref(0);      const numHeight = ref(0)      onMounted(()=>{          numWidht.value =commer.value.width          numHeight.value =commer.value.height      })      return {          commer,numWidht,numHeight      }  }}</script>

子组件:

<template><h2>屏幕尺寸:</h2><h2>宽度:{{width}}</h2><h2>高度:{{height}}</h2></template> <script>// import { ref,onMounted } from 'vue';import useWindwoResize from '../hooks/useWindowResize'export default {        setup(){        const {width, height} = useWindwoResize()        return{width,height}    }};</script> <style lang="scss" scoped> </style>

 hooks页面:

import {onMounted, onUnmounted, ref} from 'vue';function useWindowResize(){    const width = ref(0)    const height = ref(0)    function onResize(){        width.value = window.innerWidth        height.value = window.innerHeight    }    onMounted(()=>{        window.addEventListener("resize",onResize);        onResize();    })    onUnmounted(()=>{        window.removeEventListener('resize',onResize);    })    return{        width,        height    }}export default useWindowResize;

Vue3 hooks

在vue3中的hooks其实就是函数的写法,就是将文件的一些单独功能的js代码进行抽离出来,放到单独的js文件中。这样其实和我们在vue2中学的混入(mixin)比较像。

父组件

    <h2>屏幕尺寸:</h2><div>宽度:{{ width }}</div><div>高度:{{ height }}</div>

引入hooks中的js文件

import useWindwoResize from '../hooks/useWindowResize';setup(){    const {width, height} = useWindwoResize()     return{width,height}}

新建hooks文件夹在里面新建useWindowResize.js文件,内容如下:

import {onMounted, onUnmounted, ref} from 'vue';function useWindowResize(){    const width = ref(0)    const height = ref(0)    function onResize(){        width.value = window.innerWidth        height.value = window.innerHeight    }    onMounted(()=>{        window.addEventListener("resize",onResize);        onResize();    })    onUnmounted(()=>{        window.removeEventListener('resize',onResize);    })    return{        width,        height    }}export default useWindowResize;

Vue3通过ref操作Dom元素及hooks的使用方法是什么

关于“Vue3通过ref操作Dom元素及hooks的使用方法是什么”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“Vue3通过ref操作Dom元素及hooks的使用方法是什么”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注编程网行业资讯频道。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯