zoukankan      html  css  js  c++  java
  • vue中$refs的使用记录

    ref 目前使用过的三种方式:

    1、在html的元素中使用rel,可在js中直接调用该元素,用this.$refs.(ref值) 获取到的是dom元素

    2、在vue的组件上加rel,可在js中直接使用该组件包括该组件的方法,用this.$refs.(ref值).方法名()

    3、在v-for的循环列中使用rel

    避坑:

    v-for中使用rel需要绑定变量,即v-bind:rel='变量名'

    ref 需要在dom渲染完成后才会有,在使用的时候确保dom已经渲染完成。比如在生命周期 mounted(){} 钩子中调用,或者在 this.$nextTick(()=>{}) 中调用

    如果rel循环未绑定变量,那就$refs获取获取数组再循环得到使用即可

    例子1:在html元素上使用

    <div id="app">

        <h1 ref="h1ele">这是h1</h1>

        <hello ref="ho"></hello>

        <button @click="getref">获取h1元素</button>

    </div>

    获取注册过 ref 的所有组件或元素

    methods: {

            getref() {

              // 表示从 $refs对象 中, 获取 ref 属性值为: h1ele DOM元素

              console.log(this.$refs.h1ele.innerText);

              this.$refs.h1ele.style.color = 'red';// 修改html样式

              console.log(this.$refs.ho.msg);// 获取组件数据

              console.log(this.$refs.ho.test);// 获取组件的方法

            }

          }

    例子2:

    <html部分

    <view class="example-body">

    <button class="button" type="primary" @click="togglePopup('top', 'popup')">顶部弹出 popup</button>

    <button class="button" type="primary" @click="togglePopup('center', 'popup')">中间弹出 popup</button>

    <button class="button" type="primary" @click="togglePopup('bottom', 'popup')">底部弹出 popup</button>

    </view>

    <uni-popup ref="showpopup" :type="type" @change="change"><text class="popup-content">{{ content }}</text></uni-popup>

    <uni-popup ref="showtip" :type="type" :mask-click="false" @change="change">

    <view class="uni-tip">

    <text class="uni-tip-title">警告</text>

    <text class="uni-tip-content">这是一个通过自定义 popup,自由扩展的 警告弹窗。点击遮罩不会关闭弹窗。</text>

    <view class="uni-tip-group-button">

    <text class="uni-tip-button" @click="cancel('tip')">取消</text>

    <text class="uni-tip-button" @click="cancel('tip')">确定</text>

    </view>

    </view>

    </uni-popup>

    <js部分

    methods: {

    togglePopup(type, open) {

    switch (type) {

    case 'top':

    this.content = '顶部弹出 popup'

    break

    case 'bottom':

    this.content = '底部弹出 popup'

    break

    case 'center':

    this.content = '居中弹出 popup'

    break

    }

    this.type = type

    this.$nextTick(() => {

    this.$refs['show' + open].open()

    })

    },

    cancel(type) {

    this.$refs['show' + type].close()

    },

    change(e) {

    console.log('是否打开:' + e.show)

    }

    },

    一般来讲获取DOM元素,需document.querySelector(".class")获取这个dom节点,然后在获取元素的值。

    但是用ref绑定之后,我们就不需要在获取dom节点了,直接在上面的元素上绑定rel,然后$refs里面调用就行。

    然后在javascript里面这样调用:this.$refs.元素绑定rel  这样就可以减少获取dom节点的消耗了



    作者:卡_ec46
    链接:https://www.jianshu.com/p/69c11be77dce
  • 相关阅读:
    Bootstrap 2.2.2 的新特性
    Apache POI 3.9 发布,性能显著提升
    SQL Relay 0.48 发布,数据库中继器
    ProjectForge 4.2.0 发布,项目管理系统
    红帽企业 Linux 发布 6.4 Beta 版本
    红薯 快速的 MySQL 本地和远程密码破解
    MariaDB 宣布成立基金会
    Percona XtraBackup 2.0.4 发布
    Rocks 6.1 发布,光盘机群解决方案
    精通Servlet研究,HttpServlet的实现追究
  • 原文地址:https://www.cnblogs.com/1549983239yifeng/p/14975731.html
Copyright © 2011-2022 走看看