VUE中 ref $refs 使用详解，扩展到$parent 、$children 的使用

喜欢ヅ旅行 2021-09-15 18:52 709阅读 0赞

**$refs 的使用方法就是在元素或组件标签上添加ref属性指定一个引用信息，引用信息将会注册在父组件的$refs对象上，在js中使用$refs来指向DOM元素或组件实例；**

## ##

### 应用一：在DOM元素上使用$refs可以迅速进行dom定位，类似于$("selectId")，如下 ###

<template>
    
      <div class="parent">
    
        <p ref="testTxt">{
       {oldMsg}}</p>
    
        <button @click="changeMsg()">点击修改段落内容</button>
    
      </div>
    
    </template>
    
    <script>
    
    export default {
    
        data(){
    
            return {
    
                oldMsg:'这是原有段落数据内容',
    
                newMsg:'hello,这是新的段落数据内容！！',
    
            }
    
        },
    
        methods:{
    
            changeMsg(){
    
                this.$refs.testTxt.innerHTML=this.newMsg;
    
            },
        
        }
    
    }
    
    </script>

# #

### 应用二：也能在组件上使用ref属性，可以通过$refs实现对子组件操作,如下 ###

**①使用this.$refs.paramsName能更快的获取操作子组件属性值或函数**

parentone.vue 如下：

<template>
        <div class="parent">
            <Childone ref="childItemId"></Childone>
            <p style="color:blue;">{
       {msgFromChild}}</p>
            <button @click="getChildMsg()">使用$refs获取子组件的数据</button>
        </div>
    </template>
    
    <script>
    import Childone from './childone'
    export default {
        components:{Childone},
        data(){
            return {
                msgFromChild:'',
            }
        },
        methods:{
            getChildMsg(){
                this.msgFromChild=this.$refs.childItemId.childMsg;
            },
        }
    }
    </script>

childone.vue 如下：

<template>
        <div class="child"></div>
    </template>
    
    <script>
    export default {
        data(){
            return {
                childMsg:'这是子组件的参数'
            }
        }
    }
    </script>

### 扩展到$parent 、$children的使用： ###

**②我们可以使用$children\[i\].paramsName 来获取某个子组件的属性值或函数，$children返回的是一个子组件数组**

这里就只写父组件的代码了，parentone.vue如下：

<template>
        <div class="parent">
            <Childone></Childone>
            <Childtwo></Childtwo>
            <p style="color:blue;">{
       {msgFromChild}}</p>
            <button @click="getChildMsg()">使用$children来获取子组件的数据</button>
        </div>
    </template>
    
    <script>
    import Childone from './childone'
    import Childtwo from './childtwo'
    export default {
        components:{Childone,Childtwo},
        data(){
            return {
                msgFromChild:'',
            }
        },
        methods:{
            getChildMsg(){
                this.msgFromChild=this.$children[1].child2Msg;
            },
        }
    }
    </script>

## ##

**③那么子组件怎么获取修改父组件的数据内容？这需要使用$parent**

parentone.vue如下

<template>
        <div class="parent">
            <Childone></Childone>
        </div>
    </template>
    
    <script>
    import Childone from './childone'
    export default {
        components:{
            Childone
        },
        data(){
            return {
                parentMsg:'这是父组件的数据',
            }
        }
    }
    </script>

childone.vue如下：

<template>
        <div class="child">
            <p style="color:red;">{
       {msgFromParent}}</p>
            <button @click="getParentMsg()">点击使用$refs获取父组件的数据</button>
        </div>
    </template>
    
    <script>
    export default {
        data(){
            return {
                msgFromParent:''
            }
        },
        methods:{
            getParentMsg(){
                this.$parent.parentMsg="子组件中可以修改父组件的内容，这是通过子组件修改所得"
                this.msgFromParent=this.$parent.parentMsg;
            }
        }
    }
    </script>

### 注意： ###

**· 当使用v-for的元素或组件，引用信息$refs将是包含DOM节点的或组件实例的数组，类似$children的使用；**

**· 注意 $refs不能在created生命周期中使用 因为在组件创建时候 该ref还没有绑定元素**

created(){
            //报错， $refs不能在created生命周期中使用 因为在组件创建时候 该ref还没有绑定元素
            this.changeMsg();  
          },
          methods:{
            changeMsg(){
              this.$refs.testTxt.innerHTML=this.newMsg;
            },
          }

**· 它是非响应的，所以应该避免在模板或计算属性中使用 $refs ,它仅仅是一个直接操作子组件的应急方案；**