谈到ref大家第一反应可能就是获取dom元素,其实他的作用远不止这一个。当ref指向子组件时,能够获取到子组件的data,也能调用子组件的方法
基本用法——获取DOM元素
// HTML
<div ref="myref">123</div>
// JS
let myDOM = this.$refs.myref;
console.log(myDOM); // <div data-v-4bf94fa0>123</div>
进阶用法——获取子组件中的data
// 子组件
<template>
<div>
我是子组件
</div>
</template>
<script>
export default {
data() {
return {
name: "myhua"
};
}
};
</script>
// 父组件
<template>
<div id="app">
<Son ref="myref"></Son>
</div>
</template>
<script>
import Son from "./components/son";
export default {
mounted() {
console.log(this.$refs.myref.name);
},
components: {
Son
}
};
</script>
Result
进阶用法——调用子组件中的方法
// 子组件
<template>
<div>
我是子组件
</div>
</template>
<script>
export default {
methods: {
logName() {
console.log("myhua!!");
}
}
};
</script>
// 父组件
<template>
<div id="app">
<Son ref="myref"></Son>
</div>
</template>
<script>
import Son from "./components/son";
export default {
mounted() {
this.$refs.myref.logName();
},
components: {
Son
}
};
</script>
Result
最后
当ref指向组件时,我们通过this.$refs
得到的其实是子组件的实例,因此我们可以来完成一些事情。不过这些目前我还没有用着,先记着,指不定哪天出去面试的时候可以忽悠一下。