$refs的的使用方法
作用:可以获取dom元素和子组件实例
获取到原生的dom标签
<template>
<div>
<h1 ref="myH1">1. ref获取原生dom</h1>
<button @click="fn">点击修改上面内容</button>
</div>
</template>
<script>
export default {
methods: {
fn() {
console.log(this.$refs.myH1); // <h1></h1> 原生DOM标签
this.$refs.myH1.innerHTML = "改内容了";
}
}
}
</script>
想要获取哪个dom标签,就在这个标签上定义一个ref=“自定义名字”,给button绑定一个点击事件,当我们点击按钮时,通过this.$refs.自定义名字就可以获取到这个原生dom标签
获取子组件对象
父组件代码示例:
<template>
<div>
<h1 ref="refH2">ref获取</h1>
<MyCom ref="refCom"></MyCom>
<button @click="fn2">点击获取组件对象</button>
</div>
</template>
<script>
import MyCom from "./MyCom.vue";
export default {
components: {
MyCom,
},
methods: {
fn2() {
console.log(this.$refs.refCom); //子组件实例对象
this.$refs.refCom.com(1000);
},
},
};
</script>
<style>
</style>
子组件代码示例:
<template>
<div>
<h2>{{ num }}</h2>
</div>
</template>
<script>
export default {
data() {
return {
num: 100,
};
},
methods: {
com(n) {
this.num = n;
},
},
};
</script>
<style>
</style>
想要获取哪个子组件对象,就在这个子组件上定义一个ref=“自定义名字”,给button绑定一个点击事件,当我们点击按钮时,通过this.$refs.自定义名字就可以获取到这个子组件对象
在控制台打印可以看到这个子组件实例,里面有很多的属性和方法,就比如com这个函数我们是在子组件中定义的,我们可以在父组件中拿到子组件实例,直接传参数调用这个方法