JavaScript中ref和$refs的使用是怎样,有哪些要注意的
Admin 2022-06-13 群英技术资讯 666 次浏览
在JavaScript中需要通过document.querySelector("#demo")来获取dom节点,然后再获取这个节点的值。在Vue中,我们不用获取dom节点,元素绑定ref之后,直接通过this.$refs即可调用,这样可以减少获取dom节点的消耗。
ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs对象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向该子组件实例
通俗的讲,ref特性就是为元素或子组件赋予一个ID引用,通过this.$refs.refName来访问元素或子组件的实例
<p ref="p">Hello</p> <children ref="children"></children>
this.$refs.p this.$refs.children
this.$refs是一个对象,持有当前组件中注册过 ref特性的所有 DOM 元素和子组件实例
注意: $refs只有在组件渲染完成后才填充,在初始渲染的时候不能访问它们,并且它是非响应式的,因此不能用它在模板中做数据绑定
注意:
当ref和v-for一起使用时,获取到的引用将会是一个数组,包含循环数组源
<template> <div> <div ref="myDiv" v-for="(item, index) in arr" :key="index">{{item}}</div> </div> </template> <script> export default { data() { return { arr: ['one', 'two', 'three', 'four'] } }, mounted() { console.log(this.$refs.myDiv) }, methods: {} } </script> <style lang="sass" scoped> </style>
【1】子组件code:
<template> <div>{{msg}}</div> </template> <script> export default { data() { return { msg: '我是子组件' } }, methods: { changeMsg() { this.msg = '变身' } } } </script> <style lang="sass" scoped></style>
【2】父组件code:
<template> <div @click="parentMethod"> <children ref="children"></children> </div> </template> <script> import children from 'components/children.vue' export default { components: { children }, data() { return {} }, methods: { parentMethod() { this.$refs.children //返回一个对象 this.$refs.children.changeMsg() // 调用children的changeMsg方法 } } } </script> <style lang="sass" scoped></style>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
猜你喜欢
微信小程序中列表滑动操作怎样实现?这里主要给大家分享列表左右滑动操作的实现,小编觉得比较使用,这个功能可实现删除效果。因为目前微信小程序官方没有提供相应的控件,使用本文就给大家分享一个实现列表左右滑动效果的方法,大家可以参考。
//文件处理类varfs=require('fs');varpath=require('path');varutil=require('util');varFile={in:function(content,flag){this.writeToFile("app.log",content,flag);},on:
目录如何清除浏览器历史栈问题vue返回首页后如何清空路由需求一:从首页点击路由到A页面需求二:把浏览器的记录返回指定的页面如何清除浏览器历史栈问题需要跳转好几个页面进行表单提交,提交完之后,跳转回首页,返回上一页,发现还可以返回上一级页面路由//可以拿到历史记录栈,清空栈let routeHistory=history
这篇文章主要介绍了React-Native 环境搭建和基本介绍的相关资料,包括react native优缺点,通过实例代码给大家介绍的非常详细,需要的朋友可以参考下
这篇文章主要给大家介绍了关于ES6中Set与WeakSet集合的相关资料,Set是ES6给开发者带来的一种新的数据结构,你可以理解为值的集合,WeakSet结构同样不会存储重复的值,但它的成员必须是对象类型的值,需要的朋友可以参考下
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008