关于ref
2022/3/2 6:15:33
本文主要是介绍关于ref,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
一般来说,在使用Vue框架的时候就尽量不要去使用 document.getElementByXxx() 直接操作DOM元素,如果确实要使用的话可以使用Vue提供的API ref
,用于代替 document.getElementByXxx()
# ref
ref
被用来给元素或子组件注册引用信息。
引用信息将会注册在父组件的 $refs
对象上。
如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件实例(VueComponent)。
# $refs
一个对象,持有注册过 ref
attribute 的所有 DOM 元素和组件实例。
实机演示
Html
# App.vue
<div id="app"> <h1 ref='ref_h1'>Welcome to Your Vue.js App</h1> <img alt="Vue logo" src="./assets/logo.png"> <HelloWorld ref='ref_hello_world' msg="componentMsg"/> </div> <script> import HelloWorld from './components/HelloWorld.vue' export default { name: 'App', components: { HelloWorld }, mounted(){ console.log('ref_h1 :>> ', this.$refs.ref_h1); console.log('ref_hello_world :>> ', this.$refs.ref_hello_world); console.log('ref_hello_world.property :>> ', this.$refs.ref_hello_world.property); console.log('ref_hello_world.$props.msg :>> ', this.$refs.ref_hello_world.$props.msg); } } </script>
# HelloWorld.vue
<div class="hello"> <h1>{{ '组件中props:'+msg }}{{' 组件中property:'+property}}</h1> <p> For a guide and recipes on how to configure / customize this project,<br> check out the <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>. </p> </div> <script> export default { name: 'HelloWorld', props: { msg: String }, data() { return { property: 'value', }; }, } </script>
运行截图
本文参考:
Vue官网-ref
Vue官网-$refs
这篇关于关于ref的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-20测试人员都是画画大神,让我看看谁还不会用代码图?
- 2024-05-20年薪百万的程序员都在用的摸鱼方式……
- 2024-05-19永别了,微服务架构!
- 2024-05-15鸿蒙生态设备数量超8亿台
- 2024-05-13TiDB + ES:转转业财系统亿级数据存储优化实践
- 2024-05-09“2024鸿蒙零基础快速实战-仿抖音App开发(ArkTS版)”实战课程已上线
- 2024-05-09聊聊如何通过arthas-tunnel-server来远程管理所有需要arthas监控的应用
- 2024-05-09log4j2这么配就对了
- 2024-05-09nginx修改Content-Type
- 2024-05-09Redis多数据源,看这篇就够了