模板引用

Vue 提供了许多指令让我们可以直接操作组件的模板。但是在某些情况下,我们仍然需要访问底层 DOM 元素。在模板中添加一个特殊的属性ref就可以得到该元素。

访问模板引用

<script setup>
import { ref } from 'vue';
const demo = ref(null); onMounted(() => {
demo.value.style.width = '20px';
});
</script> <template>
<div>
<span ref="demo">Hello Vue!</span>
</div>
</template>

访问模板引用的时机

访问的顺序上有讲究。因为ref本身是作为渲染函数的结果来创建的,必须等待组件挂载后才能对它进行访问。如果不再挂载之后进行访问,百分之九十九(还有百分之一是意外)都是 nullundefined 错误。看下图:

因此,在组合式 API 中获取了 ref 之后,最好在 onMounted 函数中进行后续的操作。把第四行代码const demo = ref(null)放到 onMounted 里进行,或者其他生命周期函数里都是不行的,必须要在 setup 里进行。(本人已经测试过了)

事件函数访问模板引用

这里的实际应用时的问题:模板中添加一个按钮,按钮绑定函数onclickButton,函数里访问模板引用,此时出现模板引用 nullundefined。正如上面所述,ref 要在组件挂载完成之后才可以访问,setup函数在组件挂载之前,因此事件函数定义在 setup 里就出现 nullundefined 错误。

并且,事件函数也许只能定义在 setup 里,按钮才可以绑定该函数。这是我测试过的,在onMounted中定义的函数无法被按钮绑定。

解决方案:

  1. setup中定义对象 methods(或者其他你喜欢的变量名);
  2. onMounted函数中这样使用:
const demo = ref(null);
const methods = {}; onMounted(() => {
methods.onclickButton = () => {
demo.value.style.fontSize = "20px";
}
});

Vue3 组合式 API 中获取 DOM 节点的问题的更多相关文章

  1. 六、React 键盘事件 表单事件 事件对象以及React中的ref获取dom节点 、React实现类似Vue的双向数据绑定

    接:https://www.cnblogs.com/chenxi188/p/11782349.html 事件对象 .键盘事件. 表单事件 .ref获取dom节点.React实现类似vue双向数据绑定 ...

  2. Vue 双向数据绑定、事件介绍以及ref获取dom节点

    vue是一个MVVM的框架 M model V view MVVM  model改变会影响视图view,view改变会影响model 双向数据绑定必须在表单里面使用 //我发现在谷歌浏览器翻译后的网页 ...

  3. Omi框架学习之旅 - 获取DOM节点 及原理说明

    虽然绝大部分情况下,开发者不需要去查找获取DOM,但是还是有需要获取DOM的场景,所以Omi提供了方便获取DOM节点的方式. 这是官网的话,但是我一直都需要获取dom,对dom操作,所以omi提供的获 ...

  4. React对比Vue(03 事件的对比,传递参数对比,事件对象,ref获取DOM节点,表单事件,键盘事件,约束非约束组件等)

    import React from 'react'; class Baby extends React.Component { constructor (props) { super(props) t ...

  5. vue3组合式API

    vue3组合式API 为什么要用组合式API,我们来看看它是如何解决vue2的局限性的 1.vue2的局限性 当组件内容越来越多,逻辑越来越复杂,可读性就会降低,并且难以维护. vue2组件采用配置式 ...

  6. javascript中获取dom元素的高度和宽度

    javascript中获取dom元素高度和宽度的方法如下: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网 ...

  7. ionic2 获取dom节点

    ionic2页面上面获取dom节点,可以直接用原生的方法,document.querySelector()等, 但是不建议这样使用,建议使用官方的.就是要在获取的节点上加上#name的属性(相当于ge ...

  8. vue的数据双向绑定和ref获取dom节点

    vue是一个MVVM的框架 业务逻辑代码即js部分是model部分, html是view部分. 当model改变的时候,view也会改变 view 改变是,model也会改变 <template ...

  9. 原生JS获取DOM 节点到浏览器顶部的距离或者左侧的距离

    关于js获取dom 节点到浏览器顶/左部的距离,Jquery里面有封装好的offset().top/offset().left,只到父级的顶/左部距离position().top/position() ...

随机推荐

  1. java基础题(3)

    5.面向对象 5.1封装 5.1.1修改Data类的定义 描述 现有一个Data类,内部定义了属性x和y,在main方法中实例化了Data类,并计算了data对象中x和y的和.但是,Data类的定义存 ...

  2. AcWing-1022

    题解借鉴两位大佬的解析 墨染空 && 野生铅笔 本题是一道 01背包 的扩展题 -- 二维费用01背包问题 把 野生宝可梦 看做物品,则捕捉他需要的 精灵球 个数就是第一费用,战斗皮神 ...

  3. 记一次学习kibaba踩过的坑(Windows环境)

    下载地址 ElasticSearch:https://www.elastic.co/cn/downloads/elasticsearchLogstash:https://www.elastic.co/ ...

  4. [二进制漏洞]栈(Stack)溢出漏洞 Linux篇

    目录 [二进制漏洞]栈(Stack)溢出漏洞 Linux篇 前言 堆栈 堆栈(Stack)概念 堆栈数据存储方式 函数调用 函数调用C语言代码 函数调用过程GDB调试 函数Call返回原理 函数栈帧 ...

  5. JS:条件语句1

    条件语句: 1.if...else if (condition1) { 当条件 1 为 true 时执行 } else { 当条件 1 不为 true 时执行 } if (condition1) { ...

  6. DAST 黑盒漏洞扫描器 第四篇:扫描性能

    0X01 前言 大多数安全产品的大致框架 提高性能的目的是消费跟得上生产,不至于堆积,留有余力应对突增的流量,可以从以下几个方面考虑 流量:减少无效流量 规则:减少规则冗余请求 生产者:减少无效扫描任 ...

  7. 关于个人全栈项目【臻美Chat】遇到的BUG以及解决方法

    项目展示: 问题总结:一.单用户重复登录设备 将每次输入的用户名与已经记录在后台的数组ar比较,如果存在则表示重复. // 生成数组var ar="";socket.on('arr ...

  8. SAP 实例 13 Random Grouping with LOOP

    REPORT demo_loop_group_by_random. CLASS demo DEFINITION. PUBLIC SECTION. CLASS-METHODS: main, class_ ...

  9. SAP 时区转换

    DATA:l_tzone TYPE tzonref-tzone.   "TIME ZONE    DATA:l_timesp TYPE tzonref-tstamps."TIME  ...

  10. MySQL查询为什么没走索引?这篇文章带你全面解析

    工作中,经常遇到这样的问题,我明明在MySQL表上面加了索引,为什么执行SQL查询的时候却没有用到索引? 同一条SQL有时候查询用到了索引,有时候却没用到索引,这是咋回事? 原因可能是索引失效了,失效 ...