• 售前

  • 售后

热门帖子
入门百科

Vue中ref和$refs的先容以及使用方法示例

[复制链接]
路人52014 显示全部楼层 发表于 2021-10-25 18:52:41 |阅读模式 打印 上一主题 下一主题
媒介

在JavaScript中须要通过document.querySelector("#demo")来获取dom节点,然后再获取这个节点的值。在Vue中,我们不用获取dom节点,元素绑定ref之后,直接通过this.$refs即可调用,这样可以淘汰获取dom节点的斲丧。
ref先容


ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs对象上。如果在寻常的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向该子组件实例
普通的讲,ref特性就是为元素或子组件赋予一个ID引用,通过this.$refs.refName来访问元素或子组件的实例
  1. <p ref="p">Hello</p>
  2. <children ref="children"></children>
复制代码
  1. this.$refs.p
  2. this.$refs.children
复制代码
this.$refs先容


this.$refs是一个对象,持有当前组件中注册过 ref特性的全部 DOM 元素和子组件实例
注意: $refs只有在组件渲染完成后才添补,在初始渲染的时间不能访问它们,并且它黑白响应式的,因此不能用它在模板中做数据绑定
注意:
当ref和v-for一起使用时,获取到的引用将会是一个数组,包含循环数组源
  1. <template>
  2. <div>
  3. <div ref="myDiv" v-for="(item, index) in arr" :key="index">{{item}}</div>
  4. </div>
  5. </template>
  6. <script>
  7. export default {
  8. data() {
  9. return {
  10.   arr: ['one', 'two', 'three', 'four']
  11. }
  12. },
  13. mounted() {
  14. console.log(this.$refs.myDiv)
  15. },
  16. methods: {}
  17. }
  18. </script>
  19. <style lang="sass" scoped>
  20. </style>
复制代码

实例(通过ref特性调用子组件的方法)


【1】子组件code:
  1. <template>
  2. <div>{{msg}}</div>
  3. </template>
  4. <script>
  5. export default {
  6. data() {
  7. return {
  8.   msg: '我是子组件'
  9. }
  10. },
  11. methods: {
  12. changeMsg() {
  13.   this.msg = '变身'
  14. }
  15. }
  16. }
  17. </script>
  18. <style lang="sass" scoped></style>
复制代码
【2】父组件code:
  1. <template>
  2. <div @click="parentMethod">
  3. <children ref="children"></children>
  4. </div>
  5. </template>
  6. <script>
  7. import children from 'components/children.vue'
  8. export default {
  9. components: {
  10. children
  11. },
  12. data() {
  13. return {}
  14. },
  15. methods: {
  16. parentMethod() {
  17.   this.$refs.children //返回一个对象
  18.   this.$refs.children.changeMsg() // 调用children的changeMsg方法
  19. }
  20. }
  21. }
  22. </script>
  23. <style lang="sass" scoped></style>
复制代码
总结

到此这篇关于Vue中ref和$refs的先容以及使用的文章就先容到这了,更多相关Vue中ref和$refs使用内容请搜刮脚本之家以前的文章或继续浏览下面的相关文章渴望大家以后多多支持脚本之家!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作