精华内容
下载资源
问答
  • vueref
    千次阅读
    2021-01-22 16:41:17
      this.$refs[pri][0].setAttribute("class", " animated printbox animated_mar");

    主要用到setAttribut方法

    更多相关内容
  • vue ref 设置样式

    千次阅读 2022-04-28 16:40:57
    for (let i = 0; i < this.$refs.jobTitleRef.length; i++) { if (this.$refs.jobTitleRef[i].offsetHeight > 80) { this.$refs.jobTitleRef[i].parentElement.style.height = '92px'; ...
    for (let i = 0; i < this.$refs.jobTitleRef.length; i++) {
      if (this.$refs.jobTitleRef[i].offsetHeight > 80) {
        this.$refs.jobTitleRef[i].parentElement.style.height = '92px';
      }
    }

    分页里,滚动事件里,获取子元素高度,动态调整父元素高度,保证一致性,提高美观。

     

    做个笔记,虽然是冷门的功能,以后说不定还用得上。

    展开全文
  • Vue ref的使用

    千次阅读 2022-03-28 15:53:10
    Vueref的使用:ref被用来给DOM元素或子组件注册引用信息。如果在普通的DOM元素上使用,引用信息就是元素;如果在子组件上使用,引用信息就是组件实例。 注意:在Vue中直接操作DOM元素,就必须用ref属性进行注册。 ...

    前言

    Vue中ref的使用:ref被用来给DOM元素或子组件注册引用信息。如果在普通的DOM元素上使用,引用信息就是元素;如果在子组件上使用,引用信息就是组件实例。
    注意:在Vue中直接操作DOM元素,就必须用ref属性进行注册。

    在Vue2中的用法

    <template>
      <div id="app">
        <div ref="testDom">11111</div>
        <button @click="getTest">获取test节点</button>
      </div>
    </template>
    
    <script>
    export default {
      methods: {
        getTest() {
          console.log(this.$refs.testDom)
        }
      }
    };
    </script>
    

    Vue3中的用法

    <template>
        <div id="app">
        <div ref="testDom">11111</div>
        <button @click="getTest">获取test节点</button>
      </div>
    </template>
    <script>
    import { ref } from "vue";
    export default {
        
        setup(Proxy) {
            const testDom = ref('')
            const getTest = () => {
                console.log(testDom.value);
            }
    
            return {
               getTest,
               testDom 
            }
        },
    }
    </script>
    

    控制台展示

    展开全文
  • vue ref介绍

    千次阅读 2020-05-28 15:00:47
    基本用法 ref 有三种用法: 1、ref 加在普通的元素上,用this.ref.name 获取到的是dom元素 ... 如果是普通的元素那返回的是一个普通的dom,如果ref放在vue组件里,那么返回的是一个vue对象,这个对象包

    基本用法

    ref 有三种用法:

    1、ref 加在普通的元素上,用this.ref.name 获取到的是dom元素

    2、ref 加在子组件上,用this.ref.name 获取到的是组件实例,可以使用组件的所有方法。

    3、如何利用 v-for 和 ref 获取一组数组或者dom 节点
      在这里插入图片描述
      
      第1,2种情况
      this.$refs 获取了所有设置ref属性的元素(如有重名那么会被覆盖)
      如果是普通的元素那返回的是一个普通的dom,如果ref放在vue组件里,那么返回的是一个vue对象,这个对象包含了这个组件的各种信息
      
      第3种情况
      在这里插入图片描述
      在这里插入图片描述

    如图所示这样使用
    this.$refs.g1 获取得是vue组件对象的集合,就不覆盖了

    $attrs

    父子之间值传递,我们一般用的是在属性里设置,采用:prop="prop"的格式
    在子级的props定义接受,然后可以直接使用,
    若props里没有定义,那么可以使用this.$attrs里获取没有定义的值,

    如下图
    在这里插入图片描述
    图中定义了3个属性(v-model也是个特殊的属性,在props中可以用 value来接收)
    在这里插入图片描述
    那$attrs的值是什么呢?
    在这里插入图片描述
    是除了props里已经定义接收了的传值, 就剩下了grand-id这个属性

    如果还有孙子级的组件, 我们还可以用

    v-bind="$attrs"
    

    这种方式再次传递到孙子级的页面,孙子级仍然可以使用props来获取。如果不使用props,那么还可以依旧使用this.$attrs来获取,
    这个相当于搭了个桥,
    在这里插入图片描述

    如上图所示,this. a t t r s 里 面 为 g r a n d I d : 1 , 我 们 使 用 v − b i n d = " t h i s . attrs里面为{grandId:1}, 我们使用v-bind="this. attrsgrandId:1,使vbind="this.attrs" 同等于 v-bind:grandId=“1”.这是只有一个属性值,所以差别不大,如果有多个属性值,那就不需要我们写了。直接借你一用,把各个需要传递给子孙级的数据,直接传到了目的地

    语法糖的问题

    在看同事代码的时候,发现在改变子级元素的值的时候,直接去改变了父级的值。没有用vuex,没有用emit。

    其实还是用了emit,只是一些语法糖

    v-model
    在这里插入图片描述
    在这里插入图片描述
    如上面所展示代码
    用v-model绑定了元素,在子级里面props接收到了value的值。
    用该值初始化了inputValue,并监听emit了一个input事件。
    在第一幅图里 v-model里绑定的值,也跟着改变了。

    相当于
    在这里插入图片描述
    还是相当于在父级上绑上了一个事件,只是为了简单写法,省略一些东西

    .sync
    普通属性呢?其实也有一种简单的写法。

    <template>
      <div class="dashboard-container">
        {{ object }}
        <text1 v-model="object.v" :changep.sync="object.p" />
      </div>
    </template>
    
    <script>
    
    import text1 from './text'
    
    export default {
      components: {
        text1
      },
      data() {
        return {
          object: {
            v: 1,
            p: 2
          }
    
        }
      }
    }
    </script>
    
    
    
    <!--
     * @Author: hanker
     * @LastEditors: hanker
     * @Description:
    -->
    <template>
      <div class="">
        <el-input v-model="inputValue" />
        <el-button @click="clickHandle">点击改变p</el-button>
      </div>
    </template>
    
    <script>
    // import x from ''
    export default {
      components: {
    
      },
      props: {
    
      },
      data() {
        return {
          inputValue: this.value
        }
      },
      computed: {
    
      },
      watch: {
        inputValue(newValue) {
          this.$emit('input', newValue)
        }
      },
      mounted() {
    
      },
      methods: {
        clickHandle() {
          const p = '改变了对应的p'
          this.$emit('update:changep', p)
        }
      }
    }
    </script>
    
    <style lang='scss' scoped>
    //@import url()
    
    </style>
    
    

    在看一些vue开源的后台管理系统的时候,常常看到这些快捷写法,大家不要慌。百度一下,完事大吉

    展开全文
  • vue ref 添加删除判断class 样式

    千次阅读 2021-11-25 18:05:16
    // 移除ref的class // 这里的 ref_el 是个数组 refRemoveClass(ref_el, class_name) { ref_el.forEach((element) => { let class_name_arr = element.className.split(" "); let index = class_name_arr.find...
  • vue ref属性(标签属性)

    千次阅读 2021-07-20 21:22:13
    要点: 之前 我们用原生js写的话,写id,通过dom操作获取元素进行操作 vue中用ref ...比如这边在h1和btn上加了ref则在vue component的$ref中,收集了,title和btn元素 注意: 如果在一个组...
  • vue ref :refIn my previous post, I implemented my first Vue3 component. 在上一篇文章中,我实现了我的第一个Vue3组件。 I implementend a very simple web app (roll the dice) where I had a “div” where ...
  • 在组件中每个dom元素都可以添加ref属性,即使是封装好的组件拿来用都可以为其添加ref属性,但是ref属性值在当前组件中不能被重复。如果重复了,会将最后一个相同ref属性值获取,也只操作最后一个,通过this.$refs....
  • Vue ref 的用法详解

    千次阅读 2019-09-24 13:59:07
    ref 被用来给元素或子组件注册引用信息。...如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件实例。 用法如下 ...p ref="p">hello</p> <!-- `vm.$re...
  • vue ref获取实例子undefined

    千次阅读 2020-10-23 14:09:43
    首先你要知道 this.$refs 是干嘛的 ? 直接上图 也就是对于 dom进行操作 当你再created中使用 this.$refs时 dom没有加载成功 所以为undefined ...所以你要是想获取 ...1、要么写在mounted中 dom已经加载完成 ...
  • vue ref和$refs 获取不到值

    千次阅读 2021-07-23 17:15:14
    父级用this.refs获取子组件中的数据,打印console.log(this.refs获取子组件中的数据,打印console.log(this.refs获取子组件中的数据,打印console.log(this.refs)有一个东西出现,但是console.log(this.$refs.name....
  • 如果获取的是vue组件,获取到的会是组件最外层的dom, 这是我获取vant的input组件所获取到的值: <van-field ref="input" id="input" v-model="money" type="number" /> console.log(this.$refs.input) ...
  • vue ref与this.$refs 使用

    千次阅读 2020-08-03 09:07:44
    Vue的this.$refs详解
  • vue ref 和 $refs 和原生的document.getElementById 如图,ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的$refs对象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用...
  • vue ref和v-if冲突问题

    千次阅读 2019-08-14 21:36:14
    使用vue对单表实现对单表的查询与修改 查询页面作为父组件 单条记录修改作为子组件 使用v-if控制修改界面的显示与隐藏 使用ref将父组件要修改的记录传递给子组件,调用子组件的方法进行数据传递时,调试发现子...
  • 主要介绍了vue 使用ref 让父组件调用子组件的方法,需要的朋友可以参考下
  • vue ref scrollTop不起作用

    万次阅读 2017-11-03 15:14:17
    当我们在vue中使用ref,来多列控制设置scrollTop或者scrollTo时,若无效,不妨试试  this.$nextTick(() => { this.$refs.viewBox[key].scrollTo(0, 34 * index); }) 多数原因是加在顺序问题导致设置无效
  • Vue ref方式父子组件传值方法

    千次阅读 2019-05-13 11:13:01
    Vue ref方式父子组件传值方法
  • Vue实例中的自带的$refs属性获取元素 用预先定义好的引用名来获取 即在页面中的ref属性定义的值 var vm=new Vue({ el:'#app', data:{}, methods:{ getElement() { console.log(this.$refs.myti
  • vue ref 获取子组件属性值

    千次阅读 2019-09-02 11:26:43
    <customer-modal ref="modalForm" @ok="modalFormOk"> // ref属性值指定了从$refs中获取组件的名称 调用子组件的函数 this.$refs.modalForm.add(); 调用子组件的属性 this.$refs.modalForm.title = "新增...
  • 今天小编就为大家分享一篇vue--点击当前增加class,其他删除class的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 今天小编就为大家分享一篇vue中动态添加class类名的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue ref获取不到dom

    千次阅读 2019-07-29 17:06:51
    input type="text" ref="infoName" :value="info_form.name" @blur="saveEditName"> console.log('还未挂载',this.$refs.infoName); setTimeout(()=>{ console.log('挂载dom',this.$refs.infoName); ...
  • 一、ref的基本使用 ref的使用 <!-- `vm.$refs.p`将会是DOM结点 --> <p ref=p>hello <!-- `vm.$refs.child`将会是子组件实例 --> <child ref=child> 如果在普通的 DOM 元素上使用,引用指向的就是DOM ...
  • Vueref的用法

    千次阅读 2022-06-17 15:54:33
    1、ref 加在普通的元素上,用this.$refs.(ref值) 获取到的是dom元素 2、ref 加在子组件上,用this.$refs.(ref值) 获取到的是组件实例,可以使用组件的所有方法。在使用方法的时候直接this.$refs.(ref值)....
  • Vue-ref属性

    2022-05-02 10:20:47
    Vue中,我们可以使用ref属性来获取DOM元素甚至组件引用来做出相应的操作 所以在Vue项目中,我们不会去使用jQuery,这也是jQuery慢慢淡出人们视线的主要原因之一 目录 ref引用DOM元素 ref定义 ref引用组件实例...
  • Vueref的三种用法

    万次阅读 多人点赞 2022-01-24 17:18:27
    最近在开发Vue项目,发现了一个ref的使用场景:将父组件中的值传递给子组件并且调用子组件的方法。 获取dom元素 获取子组件中的data 调用子组件中的方法 1.获取dom元素 通过`this.$refs.name`获取dom元素 // HTML ...
  • vueref的使用

    千次阅读 2022-04-15 20:51:04
    于是vue可以帮我们解决这个问题,vue也有自带的获取DOM的方法,那就是ref。它不仅可以获取DOM元素还可以获取组件。 一、获取DOM,操作DOM 1、给dom节点记上ref属性,可以理解为给dom节点起了个名字。 2、加上ref...
  • 官网上的说明 ...难道,在 Vue 中就不能手动获取到页面上的 DOM 元素了吗,答案当然是可以手动获取到 DOM 元素的,在 Vue 中我们可以通过使用 ref 实现获取 DOM 元素的功能,当然,这也只是 ref 其中一项的

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 95,992
精华内容 38,396
关键字:

vueref