脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue3通过ref操作Dom元素及hooks的使用方法

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

 更新时间：2023年01月26日 12:41:23   作者：Nanchen_42  
这篇文章主要介绍了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}
  }

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

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

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

看这个例子：

父组件：

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <com ref="commer"></com>
    <h3>通过ref用父组件接收子组件中的宽和高：<span>{{numWidht}} {{numHeight}}</span></h3>
 
  </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>
<h1>屏幕尺寸：</h1>
<h1>宽度：{{width}}</h1>
<h1>高度：{{height}}</h1>
</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）比较像。

父组件

    <h1>屏幕尺寸：</h1>
	<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的使用方法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • Vue分页查询怎么实现

    Vue分页查询怎么实现

    这篇文章主要介绍了Vue分页查询怎么实现，使用vue实现分页的逻辑并不复杂，接收后端传输过来的数据，然后根据数据的总数和每一页的数据量就可以计算出一共可以分成几页
    2023-04-04
  • Vue之计算属性详解

    Vue之计算属性详解

    这篇文章主要为大家介绍了Vue的计算属性，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
    2021-11-11
  • vue3+vite assets动态引入图片的三种方法及解决打包后图片路径错误不显示的问题

    vue3+vite assets动态引入图片的三种方法及解决打包后图片路径错误不显示的问题

    这篇文章主要介绍了vue3+vite assets动态引入图片的几种方式，解决打包后图片路径错误不显示的问题,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2023-03-03
  • vue 解决provide和inject响应的问题

    vue 解决provide和inject响应的问题

    这篇文章主要介绍了vue 解决provide和inject响应的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • Vue-less的使用和deep深度选择器详解

    Vue-less的使用和deep深度选择器详解

    这篇文章主要介绍了Vue-less的使用和deep深度选择器,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • Vue2 与 Vue3 的数据绑定原理及实现

    Vue2 与 Vue3 的数据绑定原理及实现

    这篇文章主要介绍了Vue2与Vue3的数据绑定原理及实现，数据绑定是一种把用户界面元素的属性绑定到特定对象上面并使其同步的机制，使开发人员免于编写同步视图模型和视图的逻辑
    2022-09-09
  • 详解Vue中$refs和$nextTick的使用方法

    详解Vue中$refs和$nextTick的使用方法

    这篇文章主要为大家介绍了Vue中$refs和$nextTick的使用方法，文中的示例代码讲解详细，对我们学习Vue有一定帮助，需要的可以参考一下
    2022-03-03
  • vue组件中节流函数的失效的原因和解决方法

    vue组件中节流函数的失效的原因和解决方法

    这篇文章主要介绍了vue组件中节流函数的失效和解决方法，帮助大家更好的理解和学习vue框架，感兴趣的朋友可以了解下
    2020-12-12
  • ElementUI el-table 树形数据的懒加载的实现

    ElementUI el-table 树形数据的懒加载的实现

    当面对大量数据时,一次性加载所有数据可能会导致性能问题,我们可以实现树形数据的懒加载,本文主要介绍了ElementUI el-table 树形数据的懒加载,感兴趣的可以了解一下
    2024-06-06
  • Vue3新特性Suspense和Teleport应用场景分析

    Vue3新特性Suspense和Teleport应用场景分析

    本文介绍了Vue2和Vue3中的Suspense用于处理异步请求的加载提示,以及如何在组件间实现动态加载,同时,Teleport技术展示了如何在DOM中灵活地控制组件的渲染位置,解决布局问题,感兴趣的朋友跟随小编一起看看吧
    2024-07-07

最新评论