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的使用方法内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
Vue3使用hooks函数实现代码复用详解
目录 前言 VUE2我们是怎么做的呢? VUE3中我们怎么处理复用代码逻辑的封装呢? 说那么多,不如直接上代码来看差异 前言 项目开发过程中,我们会遇到一些情况,就是多个组件都可以重复使用的一部分代码逻辑,功能函数,我们想要复用,这可怎么办呢? VUE2我们是怎么做的呢? 在vue2 中有一个东西:Mixins 可以实现这个功能 mixins就是将这些多个相同的逻辑抽离出来,各个组件只需要引入mixins,就能实现代码复用 弊端一: 会涉及到覆盖的问题 组件的data.methods.filte
-
vue3在自定义hooks中使用useRouter报错的解决方案
目录 自定义hooks中使用useRouter报错 useRouter useRoute 使用Vue.use()报错“Cannot read property ‘use‘ of undefined” 原因 正解 自定义hooks中使用useRouter报错 随着vue3的更新,vue-router也更新到了4.x useRouter 相当于vue2的this.$router全局的路由实例,是router构造方法的实例 useRoute 相当于vue2的this.$route表示当前激活的路由的状
-
vue3使用自定义hooks获取dom元素的问题说明
目录 使用自定义hooks获取dom元素问题 分享下楼主自己的观点 vue获取/操作组件的dom元素 下面是我的代码内容(非全部内容) 最后总结 使用自定义hooks获取dom元素问题 在自定义hooks的onMounted事件里面 获取ref元素,组件调用hooks的时候必须要传递响应式对象. 分享下楼主自己的观点 代码如下 <script> // demo.vue import { defineComponent, ref } from 'vue' import useBars from
-
Vue3中操作dom的四种方式总结(建议收藏!)
目录 前言 通过ref直接拿到dom引用 适用场景 示例代码 通过父容器的ref遍历拿到dom引用 适用场景 示例代码 通过:ref将dom引用放到数组中 适用场景 示例代码 通过子组件emit传递ref 适用场景 示例代码 写在最后 前言 最近产品经理提出了很多用户体验优化的需求,涉及到很多dom的操作. 小张:“老铁,本来开发Vue2项目操作dom挺简单的,现在开发vue3项目,突然感觉一头雾水!” 我:“没事,原理都差不多,查查资料应该没问题的!” 至此将Vue3中dom操作常见的几种方式
-
vue3中的hooks总结
目录 vue3的hooks总结 计数器的hook vue3自定义hooks vue3的hooks总结 vue3中的hooks其实是函数的写法,就是将文件的一些单独功能的js代码进行抽离出来,放到单独的js文件中.这样其实和我们在vue2中学的mixin比较像.下面我们总结一下如何去书写hooks. 首先应该先建立一个hooks文件夹:其目的是为了存放hook文件. 建立相关的hook文件:一般使用use开头. 计数器的hook useTitle的hooks useScrollPostion用来监
-
vue3自定义hooks/可组合函数方式
目录 自定义hooks/可组合函数 1.mixins方式的痛点 2.传统mixins方式示例 3.自定义hooks方式示例 vue3(hooks) 自定义hooks/可组合函数 vue3 composition api下mixins的替代方式(自定义hooks / 可组合函数) 传统方式下封装的mixins在引入文件里都是通过this来调用属性或方法, 而在vue3的composition API下this是undefined,实际上这两者就是冲突的, 只能封装一套全新的方式来使用类似mixin
-
Vue3项目中的hooks的使用教程
目录 hooks 特点 hooks 基本使用 今天我们稍微说一下 vue3 项目中的 hooks 的使用,其实这个 hooks 呢是和 vue2 当中的 mixin 是类似的,学习过 vue2 的小伙伴一定对 mixin 一定比较熟悉,就算没用过也一定了解过,也就是混入,通过 mixin 混入来分发 vue 组件中的可复用功能.一个混入对象可以包含任意组件选项.当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项.而 vue2 的 hooks 函数与 mixin 混入的区别,
-
vue3的setup语法如何自定义v-model为公用hooks
目录 前言 基础 基本的v-model 多个v-model绑定 v-model修饰符 进阶 问题背景 方式一:通过watch中转 方式二:computed的get和set 终极:封装v-model的hooks 提取公用逻辑 继续抽离封装 前言 基础篇:简单介绍vue3的setup语法如何自定义v-model: 进阶篇:如何提取v-model语法作为一个公用hooks: 基础 基础篇可绕过,只是对于官网给出的教程,进行了总结概括并给出demo 基本的v-model 子组件中满足两个点,即可完成自定
-
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(实例),通过实例去获取里面的属性或
-
vue操作dom元素的3种方法示例
1.原生js操作dom const dom = getElementById('box') 2.vue官方方法:ref vue中的ref是把当前dom元素 " 抽离出来 " ,只要通过 this.$refs就可以获取到 < div class="set" ref="up"> .set是我们要操作的dom对象,它的ref是 up @click="Alert" 给父元素一个点击事件, 接下来我们来编写这个方法 meth
-
vue 3.0 使用ref获取dom元素的示例
前言 附上vue3.0文档:Vue3中文文档 - vuejs Vue 2.x获取DOM <div ref="myRef"></div> this.$refs.myRef Vue 3.0获取单个DOM <template> <div ref="myRef">获取单个DOM元素</div> </template> <script> import { ref, onMounted } fr
-
Js操作DOM元素及获取浏览器高宽的简单方法
在JavaScript中,经常会来获取Document文档元素,是 HTML 文档对象模型的英文缩写,Document Object Model for HTML,是基于浏览器编程,HTML DOM 定义了用于 HTML 的一系列标准的对象,以及访问和处理 HTML 文档的标准方法. 通过 DOM,可以访问所有的 HTML 元素,连同它们所包含的文本和属性.可以对其中的内容进行修改和删除,同时也可以创建新的元素.HTML DOM 独立于平台和编程语言.它可被任何编程语言诸如 Java.JavaS
-
Vue获取DOM元素并修改属性的方法
Vue获取DOM元素 Vue获取DOM元素有两种方法 直接给相应的元素加id,然后再使用document.getElementById("id");获取 使用ref,给相应的元素加ref=“name”然后再使用this.$refs.name获取到该元素 Vue获取到元素并修改属性或者样式 使用上述的第二种方法,获取到元素,然后使用this.$refs.元素元素的ref对应的name.style.属性名(样式或者其他的属性名) = “你要设置的值”或者元素的ref对应的name.属性名(
-
vue3中ref绑定dom或者组件失败的原因及分析
目录 vue3 ref绑定dom或者组件失败原因分析 场景描述 ref绑定失败情况举例 解决方案 vue3组合式API的v-for及ref绑定DOM 总结 vue3 ref绑定dom或者组件失败原因分析 场景描述 在vue3中经常用到使用ref绑定组件或者dom元素的情况,很多时候,明明使用ref绑定了相关组件,但是经常ref绑定失败的情况. ref绑定失败情况举例 ref绑定失败的绝大多数情况是,在ref和组件绑定的时候,该组件还未渲染,所以绑定失败. 或者组件刚开始未渲染,ref未绑定,当组
-
JavaScript操作DOM元素的childNodes和children区别
对于DOM元素,children是指DOM Object类型的子对象,不包括tag之间隐形存在的TextNode,而childNodes包括tag之间隐形存在的TextNode对象. 具体看一下针对children和childNodes在chrome环境下的测试: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</
-
js/jQuery对象互转(快速操作dom元素)
复制代码 代码如下: // jquery对象转js对象 $('#search')[0].checked=true; // js对象转jquery对象 var obj = document.getElementById('search'); alert($(obj).checked);
-
详谈jQuery操纵DOM元素属性 attr()和removeAtrr()方法
jQuery中操纵元素属性的方法: attr(): 读或者写匹配元素的属性值. removeAttr(): 从匹配的元素中移除指定的属性. attr()方法 读操作 attr()读操作. 读取的是匹配元素中第一个元素的指定属性值. 格式: .attr(attributeName),返回值类型:String.读取不存在的属性会返回undefined. 注意选择器的选择结果可能是一个集合,这里仅仅获取的是集合中第一个元素的该属性值. 看例子: 复制代码 代码如下: <!DOCTYPE html>
-
JQuery为页面Dom元素绑定事件及解除绑定方法
1.绑定事件 复制代码 代码如下: $('#id').bind("click",function(){ ... }) 可一次性绑定多个事件 复制代码 代码如下: $('#id').bind("click mouseover mouseout",function(){ ... }) 2.解除绑定 复制代码 代码如下: $('#id').unbind("click") 3.绑定一次 复制代码 代码如下: $('#id').one("clic