refs_ref属性 - CSDN
精华内容
参与话题
  • vue的ref与$refs

    千次阅读 2018-05-17 16:45:51
    一....lt;information ref='information'>&... import information from './information' components:{information,bill,means},在父组件上使用子组件的值,js :this.$refs.information....


     一. ref使用在父组件上

    父组件html:

      <information ref='information'></information>

      import information from './information'

      components:{information,bill,means},

    在父组件上使用子组件的值,js :this.$refs.information.isAdd;   isAdd是information组件的data的属性。

    二.ref使用在元素上

    例如本组件html:

    <span ref="myspan" class="redmy">23232</span>

    本组件js使用:this.$refs["myspan"].className  //  redmy
    this.$refs["myspan"]   指代对象//<span class="redmy">23232</span>

    三.ref使用在子组件上

    子组件上有

    <h5 ref='insideDomRef'>我是子组件</h5>

    父组件上可以引用子组件的值:this.$refs.insideDomRef// <h5 >我是子组件</h5>


    实例
    这是父组件:
    复制代码
    <template><div>
      <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" 
          label-width="100px" class="demo-dynamic">
    
      <el-form-item prop="email" label="邮箱" :rules="[{required: true,message:'请输入邮箱地址', trigger:'blur' },{type:'email',message:'请输入正确的邮箱地址',trigger:'blur,change'}]">
        <el-input v-model="dynamicValidateForm.email" ref="myemail"></el-input>
      </el-form-item>
    
      <el-form-item v-for="(domain, index) in dynamicValidateForm.domains" :label="'域名' + index"
          :key="domain.key" :prop="'domains.' + index + '.value'" :rules="{required: true, message: '域名不能为空', trigger: 'blur'}">
          <el-input v-model="domain.value"></el-input>
          <el-button @click.prevent="removeDomain(domain)">删除</el-button>
      </el-form-item>
    
      <span ref="myspan" class="redmy">23232</span>
    
      <el-form-item>
        <el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button>
        <el-button @click="addDomain">新增域名</el-button>
        <el-button @click="resetForm('dynamicValidateForm')">重置</el-button>
      </el-form-item>
    
    </el-form>
    
    <childone ref="childonemyyy"></childone>
    </div>
    </template>
    <script>
    import childone from './childone'
      export default {
        components:{childone},
        data() {
          return {
            dynamicValidateForm: {
              domains: [{
                value: ''
              }],
              email: '',
              spanval:'',
            }
          };
        },
        methods: {
          submitForm(formName) {
    
            this.$refs["childonemyyy"].isAdd;//"mychildone"用在父组件上引用子组件值,返回子组件上的data数据
            this.$refs["myspan"].className  //redmy  用在元素上,返回元素节点对象
    
            this.$refs[formName].validate((valid) => {
    
              if (valid) {
                alert('submit!'+this.$refs[formName].email);
              } else {
                console.log('error submit!!');
                return false;
              }
            });
          },
          resetForm(formName) {
            this.$refs[formName].resetFields();
          },
          removeDomain(item) {
            var index = this.dynamicValidateForm.domains.indexOf(item)
            if (index !== -1) {
              this.dynamicValidateForm.domains.splice(index, 1)
            }
          },
          addDomain() {
            this.dynamicValidateForm.domains.push({
              value: '',
              key: Date.now()
            });
          }
        }
      }
    </script>
    复制代码

    这是子组件:

    复制代码
    <template><div>
        <p class="ppp">我是p段落,我是子组件一</p>
        <el-button @click="submit">子组件</el-button>
        </div>
    </template>
    <script type="text/javascript">
         export default {
             data(){
                 return{
                     isAdd:"mychildone",
                 }
             },
             methods:{
                 submit(){
                     
        } },
         created(){ } 
    }
    </script>
    展开全文
  • $refs基本用法

    千次阅读 2019-02-13 16:26:16
    在vue项目中,可以用ref绑定之后,我们就不需要在获取dom节点了,直接在上面的input上绑定input1,然后在javascript里面这样调用:this.$refs.input1 这样就可以减少获取dom节点的消耗了 详细参见以下例子使用: .....

    js中获取DOM元素,需document.getElementById("#input1")等方法获取这个dom节点,然后在获取input1的值。在vue项目中,可以用ref绑定之后,我们就不需要在获取dom节点了,直接在上面的input上绑定input1,然后在javascript里面这样调用:this.$refs.input1  这样就可以减少获取dom节点的消耗了

    详细参见以下例子使用:

    HTML部分:

    <div id="app">
        <input type="text" ref="input1"/>
        <button @click="add">添加</button>
    </div>

    JS部分:

    <script>
    new Vue({
        el: "#app",
        methods:{
        add:function(){
            this.$refs.input1.value ="22"; //this.$refs.input1  减少获取dom节点的消耗
            }
        }
    })
    </script>

     

     

    展开全文
  • this.$refs

    千次阅读 2019-11-04 14:04:09
    给组件加 ref 打印结果 this.$refs.comp 是 vue...可以通过 $refs 得到组件,进而调用组件的变量和方法,如 this.$refs.comp.value 拿到了组件内部变量 value 值。所以可以通过 ref 操纵组件上的内容(推荐用 props ...

    给组件加 ref
    打印结果 this.$refs.comp 是 vue 组件,this.$refs.span 打印出来的是 html 节点,这也是 ref 用在组件和 html 原生标签上的区别。
    可以通过 $refs 得到组件,进而调用组件的变量和方法,如 this.$refs.comp.value 拿到了组件内部变量 value 值。所以可以通过 ref 操纵组件上的内容(推荐用 props 操纵),除非特殊情况。

    mounted () {
        console.log(this.$refs.comp, this.$refs.span, this.$refs.comp.value)
      },
      template: `
        <div>
          <comp-one ref="comp">
            <span slot-scope="props" ref="span">{{props.value}} {{props.aaa}} {{value}}</span>
          </comp-one>
        </div>
      `
    
    展开全文
  • Refs

    2018-10-21 21:24:00
    Refs提供了一种访问DOM节点或在render方法中创建的React元素的方法。 refs是React组件中非常特殊的props,可以附加在任何一个组件上。组件被调用时会新建一个该组件的实例,而refs就会指向这个实例。 在react\lib\...

    Refs提供了一种访问DOM节点或在render方法中创建的React元素的方法。

    refsReact组件中非常特殊的props,可以附加在任何一个组件上。组件被调用时会新建一个该组件的实例,而refs就会指向这个实例。

    react\lib\ReactBaseClasses.js文件中,可以看出每个组件都存在refs属性。

    /**
     * Base class helpers for the updating state of a component.
     */
    function ReactComponent(props, context, updater) {
      this.props = props;
      this.context = context;
      this.refs = emptyObject;
      // We initialize the default updater but the real one gets injected by the
      // renderer.
      this.updater = updater || ReactNoopUpdateQueue;
    }
    

    在React组件上添加refs

    1.使用字符串的方式添加refs
    格式:ref='string'

    import React, { Component } from 'react';
    import './App.css';
    import ReactDOM from 'react-dom';
    
    class Children extends Component {
      render() {
        return <div>
          子组件
        </div>
      }
    }
    class App extends Component {s
    
      render() {
        return (
          <div className="App">
          	{/* 使用字符串方式 */}
            <Children ref='children' />
          </div>
        );
      }
    
      componentDidMount() {
        console.log(this);
        console.log('*******************************');
        console.log(this.refs.children);
      }
    }
    

    输出结果:
    在这里插入图片描述

    refs 可以是字符串,同样可以是回调函数。

    2.使用 回调函数 的方式添加refs
    render方法修改如下:

    render() {
        return (
          <div className="App">
          	{/* 使用字符串方式 */}
            {/* <Children ref='childern' /> */}
            {/* 使用回调函数方式 */}
            <Children ref={ref=>this.childrenRef=ref} />
          </div>
        );
      }
    

    在这里插入图片描述

    想要获取当前React组件的实例(引用)可以使用this,获取所拥有子组件的实例(引用)可以使用refs

    React组件上添加refs,获取到的是组件的实例。而如果在原生的Dom组件上添加refs获取到的事什么呢?接着看

    在DOM元素上添加refs

    class App extends Component {
    
      constructor(props){
        super(props);
      }
    
      render() {
        return (
          <div className="App">
            <input type='text' ref='input'/>
          </div>
        );
      }
    
      componentDidMount() {
        console.log(this);
        console.log('*******************************');
        console.log(this.refs.input);
      }
    }
    

    结果如下:
    在这里插入图片描述

    使用回调函数同理,获取到的都是DOM节点。

    Refs 和函数组件

    refs无法应用于函数组件(无状态组件),因为函数组件挂载时只是方法调用,没有新建实例。

    如果需要引用它,则应该将组件转换为类,就像您需要生命周期方法或状态时一样。

    但是,只要引用DOM元素或类组件,就可以在函数组件中使用ref属性

    参考文档

    Refs and the DOM
    《深入React技术栈》

    展开全文
  • Vue 中 $refs的使用

    千次阅读 2018-12-21 13:36:35
    使用:在 HTML元素 中,添加ref属性,然后在JS中通过**vm.$refs.**属性来获取 注意:如果获取的是一个子组件,那么通过ref就能获取到子组件中的data和methods 添加ref属性 &amp;amp;amp;amp;amp;amp;amp;amp;...
  • Vue中ref和$refs的介绍及使用

    千次阅读 2020-02-26 16:19:08
    在Vue中,我们不用获取dom节点,元素绑定ref之后,直接通过this.$refs即可调用,这样可以减少获取dom节点的消耗。 ref介绍 ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的$refs对象上。如果在...
  • Vue基础4: ref 和 $refs

    千次阅读 2018-11-16 14:38:16
    1.vm.$refs和ref 【代码分析】  如图上图,ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,...
  • Refs 提供了一种方式,允许我们访问 DOM 节点或在 render 方法中创建的 React 元素。Refs 使用场景在某些情况下,我们需要在典型数据流之外强制修改子...
  • VUE中$refs的基本用法

    万次阅读 多人点赞 2019-10-12 13:34:52
     1、ref 加在普通的元素上,用this.$refs.(ref值)获取到的是dom元素  2、ref 加在子组件上,用this.$refs.(ref值) 获取到的是组件实例,可以使用组件的所有方法。在使用方法的时候直接this.$refs.(ref值)....
  • Vue与ref属性与refs

    万次阅读 多人点赞 2018-05-25 18:31:04
    引用信息会根据父组件的 $refs 对象进行注册。如果在普通的DOM元素上使用,引用信息就是元素; 如果用在子组件上,引用信息就是组件实例注意:只要想要在Vue中直接操作DOM元素,就必须用ref属性进行注册实例:这里...
  • Vue教程(ref和$refs的使用)

    万次阅读 多人点赞 2019-08-02 17:55:08
      在Vue中一般很少会用到直接操作DOM,但不可避免有时候需要用到,这时我们可以通过ref和$refs这两个来实现,本文我们就来详细的介绍下这个内容 ref    ref 被用来给元素或子组件注册引用信息, 引用信息将会...
  • 来自”和“小编的小提示:首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form。其次在拿到了正确的form后,检查该form上添加的表单验证是否正确,需要注意的点有:1.使用此方法前检查prop一定...
  • 解决git push报错error: failed to push some refs to 的问题

    万次阅读 多人点赞 2019-07-28 12:31:13
    最近自己加的开发交流群里有不少问git push远程仓库报错的问题,报错内容基本都是error: failed to push some refs to‘git@github.com:xxx.git’。看到这里,又想起当年被git所支配的恐怖,当年也是踏过这个坑的人...
  • 文章目录1、参考2、关于refs/for/ 和refs/heads/区别 1、参考 关于refs/for/ 和refs/heads/ 2、关于refs/for/ 和refs/heads/区别 这个不是git的规则,而是gerrit的规则, Branches, remote-tracking branches, and...
  • React之Refs的使用

    2019-03-26 22:52:20
    React之Refs的使用 我们在日常写React代码的时候,一般情况是用不到Refs这个东西,因为我们并不直接操作底层DOM元素,而是在render函数里去编写我们的页面结构,由React来组织DOM元素的更新。 凡事总有例外,总会...
  • git 错误error: failed to push some refs to

    万次阅读 热门讨论 2017-12-24 23:47:50
    今天使用VSCODE 学习node.js, 想在git上push代码 于是在git上建立了一个私有的...error: failed to push some refs to 'git@github.com:....." Updates were rejected because the remote contains work that you do
  • 今天做项目的时候发现,明明this.$refs里面有东西,如下图,但是打印this.$refs.xxx的时候却是undefined,如下图 打印this.$refs: console.log(this.$refs) 但是打印this.$refs.directory和this.$refs.postHeader...
  • 关于vue 的 this.$refs 打印为undefined解决办法

    万次阅读 多人点赞 2018-11-14 15:56:59
    用ref 注册子组件,父组件可以通过this.$refs.xx.fn调用子组件里的函数,但是有时会出现 fn 为定义的情况,这是为什么呢? vue 官网中ref 下有一段话 "关于 ref 注册时间的重要说明:因为 ref 本身是作为渲染...
  • Vue实例中使用$refs的注意事项

    千次阅读 2019-08-15 21:14:54
    在开发过程中,经常会通过实例的vm.$refs(this.$refs)取得通过ref注册过的组件,并进行相应操作,但存在取不到元素的情况,其根本原因是因为$refs只能取得mounted(渲染)之后的元素。 例如,在这种情况中,若...
  • vue里的$refs属性

    2020-06-11 14:43:21
    uejs的极大程度的帮助减少了对dom的操作,他主要通过添加ref属性,但是当获取this.refs属性时,稍有不注意就会输出undefined导致我们对dom节点的操作报错。this.refs属性时,稍有不注意就会输出undefined导致我们对...
1 2 3 4 5 ... 20
收藏数 69,842
精华内容 27,936
关键字:

refs