Vue3通过ref操作Dom元素及hooks的使用方法
作者:Nanchen_42 发布时间:2024-04-27 16:07:32
标签:Vue3,操作Dom,Vue3,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;
来源:https://%bcnet%/nanchen_J/article/details/123250504
0
投稿
猜你喜欢
- 1、背景最近的项目中,再次踩到Python字符串处理的坑,决定把此次解决方案记录一下,以勿踩坑。2、遇到坑原本字符串:大坪英利国际8号楼88
- detectres.asp<HTML><head><TITLE>asp教程之全能屏幕分辨率侦测</
- go语言中defer最主要的目的是在函数执行完毕后及时的释放资源入门案例package mainimport "fmt"
- mysql默认varchar类型是对大小写不敏感(不区分),如果想要mysql区分大小写需要设置排序规则:utf8_bin将字符串中的每一个
- 每次和朋友聊天苦于没有表情包,而别人的表情包似乎是取之不尽、用之不竭。作为一个程序员哪能甘愿认输,于是做了一个表情包下载器供大家斗图。首先,
- 本文实例为大家分享了python监控nginx端口和进程状态的具体代码,供大家参考,具体内容如下#!/usr/local/bin/pytho
- 在ubuntu下面发生的原因是:开了多个pycharm,关掉那个new project选项是灰色的,剩下的那个pycharm的new pro
- 窗口的透视变换效果 当我们点击Win10的UWP应用中的小部件时,会发现小部件会朝着鼠标点击位置凹陷下去,而且不同的点击位置对应着不同的
- 程序员的时间很宝贵,Python这门语言虽然足够简单、优雅,但并不是说你使用Python编程,效率就一定会高。要想节省时间、提高效率,还是需
- 提取python字符串括号中的内容一些数据按字符串保存,如str1 = '(1, 0.123) (2, 0.234)',当我
- 数据库SQL优化是老生常谈的问题,在面对百万级数据量的分页查询,又有什么好的优化建议呢?下面将列举了一些常用的方法,供大家参考学习!方法1:
- 有2种方法:一、 QML中定义一个信号,连接Python里的函数;这里的函数不用特意指明为槽函数,普通函数即可。QML的信号连接Python
- OVER的定义OVER用于为行定义一个窗口,它对一组值进行操作,不需要使用GROUP BY子句对数据进行分组,能够在同一行中同时返回基础行的
- 1.学习目标递归函数是直接调用自己或通过一系列语句间接调用自己的函数。递归在程序设计有着举足轻重的作用,在很多情况下,借助递归可以优雅的解决
- 1.简介Psycopg是一种用于执行SQL语句的PythonAPI,可以为PostgreSQL、openGauss数据库提供统一访问接口,应
- 方法一.Image { max-width:600px;height:
- 一、json_encode() 对变量进行JSON编码语法:json_encode($value[,$options=0])注意: 
- 看代码吧~func remove(slice []interface{}, elem interface{}) []interface{}{
- 如果用户输入的是直接插入到一个SQL语句中的查询,应用程序会很容易受到SQL注入,例如下面的例子:$unsafe_variable = $_
- 用户登录验证脚本,Chkpwd.asp<% '=======用户登录验证脚本======= '