$refs的作用及操作流程
$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); // 原生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这个函数我们是在子组件中定义的,我们可以在父组件中拿到子组件实例,直接传参数调用这个方法
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！