$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;
},
}