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

這篇文章主要介紹了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}
  }

父組件監聽子組件中的元素

 在父組件中的子組件里會打印一個proxy（實例），通過實例去獲取里面的屬性或者值

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

看這個例子：

父組件：

<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的使用方法是什么”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。