Vue中ref和$refs的介绍及使用
Vue 介绍 ref Refs 使用
2023-09-11 14:19:37 时间
在JavaScript中需要通过document.querySelector("#demo")来获取dom节点,然后再获取这个节点的值。在Vue中,我们不用获取dom节点,元素绑定ref之后,直接通过this.$refs即可调用,这样可以减少获取dom节点的消耗。
ref介绍
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介绍
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>
实例(通过ref特性调用子组件的方法)
【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>
转 : https://blog.csdn.net/qq_38128179/article/details/88876060
相关文章
- Vue——vue中的双向数据绑定
- vue组件之间的通信
- vue 3.0 项目搭建移动端 (二) Vue-router: router-link 与 router-view keep-alive
- Vue 国际化之 vue-i18n 的使用
- Vue 路由(Router)详细介绍(切换,传参,通信)
- Vue 防抖节流 详细介绍(面试常客、去繁从简、性能优化)
- Vue axios 详细介绍(核心使用、封装、个性化配置,破万字)
- Vue 插槽(slot)详细介绍(对比版本变化,避免踩坑)
- 给 vue项目添加ESLint
- 【Vue】Mock.js的使用教程,入门级(附代码和案例)
- 【Vue】Vue基础知识点介绍(入门级,简单易懂)——day02
- 详解vue 路由跳转四种方式 (带参数)[转载]
- vue实战入门基础篇七:从零开始仿门户网站实例-业务介绍及加入我们实现
- vue学习笔记九:Jquery VS Vue之遍历方法对照
- vue学习笔记六:Jquery VS Vue之网络请求明细对照
- 小白都能看明白的Vue中过滤器(filter)的使用详解
- Vue登录token处理
- 函数防抖节流的理解及在Vue中的应用
- vue渲染列表时报错Avoid using non-primitive value as key, use string/number value instead.
- vue中使用echarts画饼状图
- 浅析vue-class-component介绍:用类的方式编写组件
- Vue脚手架(vue-cli)搭建和目录结构详解
- Vue学习第19天——vue脚手架配置代理
- vue项目开发中遇到的几个问题
- vue $emit 子传父
- vue父传子属性命名和封装组件命名问题(巨坑)