$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 ,它仅仅是一个直接操作子组件的应急方案；