Vue3——04通过ref操作Dom元素，hooks的使用方法

最新推荐文章于 2024-09-03 20:09:51 发布

Southern Wind

最新推荐文章于 2024-09-03 20:09:51 发布

阅读量3.2k

点赞数 2

分类专栏： Vue3 文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/nanchen_J/article/details/123250504

版权

Vue3 专栏收录该内容

45 篇文章 10 订阅

订阅专栏

这篇博客介绍了在 Vue3 中如何使用 ref 获取 DOM 元素，以及在父组件中监听子组件的元素属性。同时展示了如何通过 hooks 处理窗口尺寸变化，并在父组件中传递子组件的宽高信息。文章还讨论了 Vue3 中 hooks 的概念，将其与 Vue2 中的 mixin 进行对比，并提供了具体的代码示例。

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

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;

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;