1、官方介绍:ref 用于访问子组件实例或子元素
尽管存在prop和事件,有的时候你仍可能需要在 JavaScript 里直接访问一个子组件,为了达到这个目的, 你可以通过ref
这个 attribute 为子组件副语言一个ID引用,例如:
<base-input ref="usernameInput"></base-input>
现在在你已经定义了这个ref的组件里,你可以使用:
this.$refs.usernameInput
来访问这个<base-input>
实例,以便不时之需。比如程序化地从一个父组件聚焦这个输入框。在刚才的例子中,该<base-input>
组件也可以使用一个类似的ref
提供对内部这个指定元素的访问,例如:
<input ref="input">
甚至可以通过其父级组件定义的方法:
methods:{
//用来从父级组件聚焦输入框
focus:function(){
this.$ref.input.focus();
}
}
这样就允许父级组件通过下面的代码聚焦<base-input>
里的输入框:
this.$ref.usernameInput.focus();
当 ref
和 v-for
一起使用的时候,你得到的 ref
将会是一个包含了对应数据源的这些子组件的数组。
注意:$refs
只会在组件渲染完成之后生效,并且它们不是响应式的。这仅作为一个用于直接操作子组件的"逃生舱"——你应该避免在模板或计算机属性中访问$ref
。
2、例子:获取子组件中的data
比如我们先声明一个子组件:
<template>
<div>
{
{msg}}
</div>
</template>
<script>
export default{
data(){
return{
msg: "hello world"
}
},
methods:{
open:function(){
console.log("被调用了");
}
}
}
</script>
父组件:点击button时会调用父组件的getHello方法,在getHello方法中,通过$ref
调用了子组件的data数据msf,正常输出子组件msg的值:hello world,并调用子组件的open方法输出:被调用了。
<template>
<div id="app">
<HelloWorld ref="hello">
<button @click="getHello">获取helloworkd组件中的值</button>
</div>
</template>
<script>
import HelloWorld from "./components/HelloWorld.vue";
export default{
components:{
HelloWorld
},
data(){
return{
}
},
methods:{
getHello(){
console.log(this.$ref.hello.msg);
this.$refs.hello.open();
}
}
}
</script>
3、例2:子组件调用父组件的方法:
子组件:
<template>
<div>
</div>
</template>
<script>
export default {
methods: {
open() {
console.log("调用了");
// 调用父组件方法
this.$emit("refreshData");
}
}
}
</script>
父组件:
点击button按钮:调用getHello方法,在getHello方法中通过$refs
调用子组件的open方法,在open方法中又通过$emit
调用了父组件的getData方法。
正常输出:调用了 和 111111
<template>
<div id="app">
<HelloWorld ref="hello" @refreshData="getData"/>
<button @click="getHello">获取helloworld组件中的值</button>
</div>
</template>
<script>
import HelloWorld from "./components/HelloWorld.vue";
export default {
components: {
HelloWorld
},
data() {
return {
}
},
methods: {
getHello() {
this.$refs.hello.open()
},
getData() {
console.log('111111')
}
}
};
</script>