【Vue3】深入理解Vue中的ref属性

💗💗💗欢迎来到我的博客,你将找到有关如何使用技术解决问题的文章,也会找到某个技术的学习路线。无论你是何种职业,我都希望我的博客对你有所帮助。最后不要忘记订阅我的博客以获取最新文章,也欢迎在文章下方留下你的评论和反馈。我期待着与你分享知识、互相学习和建立一个积极的社区。谢谢你的光临,让我们一起踏上这个知识之旅!
请添加图片描述

🍋什么是ref?

ref是Vue提供的一个特殊属性,用来在模板或组件中给子元素或组件注册引用信息。这个引用信息可以是一个指向DOM元素或组件实例的引用,通过这个引用,我们可以直接操作对应的DOM元素或组件实例

🍋标签的ref属性

准备好初始代码

<template>
  <div class="person">
    <h2>馒头</h2>
    <button @click="showLog">输出h2这个元素</button>
</div>
 </template>
 
 <script lang="ts" setup name="Person11">
    
   function showLog(){
    console.log()
   }
    
 </script>
 
 <style scoped>
   .person {
     background-color: skyblue;
     box-shadow: 0 0 10px;
     border-radius: 10px;
     padding: 20px;
   }
   button {
     margin: 0 5px;
   }
 </style>

我们想要输出h2这个元素,应该怎么做,我们可以选择使用JS
在这里插入图片描述
在这里插入图片描述

但是在实际工作中,这样的做法并不可取,原因是怕冲突(不同组件间id相同)
如果我们想解决一下,使用ref

<template>
  <div class="person">
    <h2 ref="a">馒头</h2>  //替换成ref
    <button @click="showLog">输出h2这个元素</button>
</div>
 </template>
 
 <script lang="ts" setup name="Person11">
    import {ref} from 'vue'
    let a = ref() //用于存储ref标记的内容
   function showLog(){
    console.log(a.value)
   }
    
 </script>
 
 <style scoped>
   .person {
     background-color: skyblue;
     box-shadow: 0 0 10px;
     border-radius: 10px;
     padding: 20px;
   }
   button {
     margin: 0 5px;
   }
 </style>

之前我们都是在html中使用ref,那么是否在组件中也同样适用呢

<template>
  <button @click="showLog">输出</button>
<person ref="ren"></person>
</template>
<script lang='ts' setup name="App">
  import person from './components/person.vue'
  import {ref} from 'vue'
  let ren = ref()
  function showLog(){
    console.log(ren.value)
  }
</script>

这样输出的就是组件实例
在这里插入图片描述

🍋扩展

defineExpose是Vue 3中一个用于向父组件公开组件内部方法或属性的函数。在Vue 3中,组件的内部状态和方法默认是私有的,只能在组件内部使用。但是有时候我们希望将一些方法或属性暴露给父组件使用,这时就可以使用defineExpose。


导入方式

import { defineExpose } from 'vue'

注意:需要注意的是,defineExpose只能在script setup中使用,而且需要在script setup中的其他代码之前调用,以确保能正确暴露组件的属性和方法。

🍋注意事项

使用ref需要注意以下几点:

避免在模板中过多使用ref,因为ref会增加组件的耦合度,使得组件难以复用和测试。
如果可能,尽量在mounted生命周期钩子中使用ref,以确保在DOM元素或组件实例完全渲染后再获取引用。
在Vue 3中,使用ref获取组件实例时,需要使用.value来访问实例

总的来说,ref是一个非常有用的特性,可以帮助我们更方便地操作DOM元素或组件实例。但是在使用时,需要谨慎考虑其对组件的影响,避免滥用

🍋总结

总结一下* 用在普通DOM标签上,获取的是DOM节点。用在组件标签上,获取的是组件实例对象。

请添加图片描述

挑战与创造都是很痛苦的,但是很充实。

  • 24
    点赞
  • 26
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 8
    评论
Vue 3 ,`ref` 是一个新的响应式 API,用于在模板引用一个元素或组件,并可以在 JavaScript 代码访问该元素或组件的属性和方法。 在模板,可以使用 `ref` 指令来创建一个 `ref` 对象,并将其绑定到一个元素或组件上。例如: ```html <template> <div> <input type="text" ref="inputRef" /> <button @click="handleClick">Click Me</button> </div> </template> <script> import { ref } from 'vue'; export default { setup() { const inputRef = ref(null); function handleClick() { inputRef.value.focus(); } return { inputRef, handleClick, }; }, }; </script> ``` 在这个例子,我们使用 `ref` 指令将 `input` 元素绑定到 `inputRef` 变量上。在 `setup` 函数,我们使用 `ref` 函数创建了一个 `ref` 对象,并将其初始值设置为 `null`。然后,我们在 `handleClick` 函数访问了 `inputRef.value`,并调用了 `focus` 方法,以便将焦点设置到 `input` 元素上。 需要注意的是,在 Vue 3 ,`ref` 不再返回一个对象,而是返回一个包含 `value` 属性的普通 JavaScript 对象。因此,在访问 `ref` 对象的属性和方法时,需要使用 `.value` 来访问其值。 另外,在 Vue 3 ,`ref` 还可以用于引用组件,例如: ```html <template> <div> <MyComponent ref="myComponentRef" /> <button @click="handleClick">Click Me</button> </div> </template> <script> import { ref } from 'vue'; import MyComponent from './MyComponent.vue'; export default { components: { MyComponent, }, setup() { const myComponentRef = ref(null); function handleClick() { myComponentRef.value.someMethod(); } return { myComponentRef, handleClick, }; }, }; </script> ``` 在这个例子,我们使用 `ref` 指令将 `MyComponent` 组件绑定到 `myComponentRef` 变量上。在 `setup` 函数,我们使用 `ref` 函数创建了一个 `ref` 对象,并将其初始值设置为 `null`。然后,我们在 `handleClick` 函数访问了 `myComponentRef.value`,并调用了 `someMethod` 方法,以便调用 `MyComponent` 组件的某个方法。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小馒头学python

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值