• ref属性


    Vue 中 可以给标签(HTML元素标签、组件标签)加上一个 ref 属性,作用就是给 标签加上一个标识,可以通过该标识获取当前需要的DOM元素或者组件实例对象。

    通过原生js获取DOM

    如果使用原生js来获取DOM元素时,我们最简单的就是通过 id 来精准获取,因为id是唯一的。

    1. <template>
    2. <div id="app">
    3. <div id='title'>这是titlediv>
    4. <button id='btn' @click='showDOM'>点击展示上面DOM结构button>
    5. <HelloWorld msg="Welcome to Your Vue.js App"/>
    6. div>
    7. template>
    8. export default {
    9. name: 'App',
    10. components: {
    11. HelloWorld
    12. },
    13. methods:{
    14. showDOM(){
    15. console.log(document.getElementById("title"))
    16. console.log(document.getElementById("btn"))
    17. console.log(document.getElementById("helloWorld"))
    18. }
    19. }
    20. }

    点击按钮之后在控制台上可以看到当前的三个DOM元素。 diiv 和 button 两个DOM 元素展示都是正常的,但是 School 组件可以看到,展示的是 School 组件内部的元素结构,id 加在了 School组件最外层 div 上

     

    但是,在 Vue 项目里面直接使用  原生js 来获取DOM节点,始终感觉怪怪的。所以Vue提供了 ref 属性来获取。实际上就是将 id 换成了 ref ,以此来提供一个唯一标识

    1. <template>
    2. <div id="app">
    3. <div ref='title'>展示DOM结构div>
    4. <button ref='btn' @click='showDOM'>点击展示上面DOM结构button>
    5. <HelloWorld ref='helloWorld' msg="Welcome to Your Vue.js App"/>
    6. div>
    7. template>

    点击按钮之后,我们看看当前 this 对象中存在一个 refs 属性

    可以看到,在refs 中存在三个 属性,分别是 我们在DOM 节点上定义的三个 ref,且这三个ref 对应的就是我们 需要的 DOM节点,以及  组件实例对象。至于为什么组件上添加 ref 属性之后,获取的是组件实例对象 而不是单纯的 DOM 节点,这是因为我们在后续的开发过程中,可能会用到组件实例对象中的某些属性,方法,或其他的数据,这就是ref 的优势所在。

    总结

    1、ref 是被用来 给 元素 或者 子组件 注册引用信息的( 替代id )

    2、应用在 html 标签上时,获取的是真实DOM元素,应用在 组件标签上时,获取的是 组件的实例对象

    3、使用方式:

            打标识:

                    html标签:

    展示DOM结构

                    组件标签:

            获取方式:this.$refs.xxx

     

     

     

  • 相关阅读:
    C# 使用SpecFlow创建BDD测试用例
    医学(残篇)持续更新
    Django部署深度学习项目-1
    如何在处理链中执行一个选择性删除ADSO数据的程序 selective deletion
    【LeetCode热题100】--169.多数元素
    华为eNSP配置专题-IPSec的配置
    【POJ No. 2352】数星星 Stars
    java-php-python-springboot小说网站计算机毕业设计
    任务调度 Quartzh 框架使用指南
    Paddle Serving v0.9.0 重磅发布多机多卡分布式推理框架
  • 原文地址:https://blog.csdn.net/qq_40792800/article/details/134435669