vue3中的标签属性中的Ref

用在普通 DOM 标签上,获取的是 DOM 节点

  • 当你在一个普通的 HTML 标签(例如 <div><input> 等)上使用 ref 属性时,ref 会返回该 DOM 元素的直接引用。这使得你可以在 JavaScript 代码中方便地访问和操作这个 DOM 元素。通常用于需要直接操控 DOM(如焦点管理、滚动等)的情况。

    javascript 复制代码
    <template>
      <div ref="myDiv">这是一个 div</div>
    </template>
    
    <script>
    import { ref, onMounted } from 'vue';
    
    export default {
      setup() {
        const myDiv = ref(null);
    
        onMounted(() => {
          // 访问原生 DOM 节点
          console.log(myDiv.value); // myDiv.value 将是一个 DOM 节点
          myDiv.value.style.backgroundColor = 'yellow'; // 修改背景颜色
        });
    
        return {
          myDiv,
        };
      },
    };
    </script>

    用在组件标签上,获取的是组件实例对象:

  • 当你在一个自定义组件(子组件)上使用 `ref` 属性时,`ref` 方式获取的是该组件的实例对象,而不是 DOM 节点。这使得你可以直接访问组件的属性和方法,包括响应式数据和 emitted 事件等。

    javascript 复制代码
    <template>
      <MyComponent ref="myComponentRef" />
    </template>
    
    <script>
    import { ref, onMounted } from 'vue';
    import MyComponent from './MyComponent.vue';
    
    export default {
      components: { MyComponent },
      setup() {
        const myComponentRef = ref(null);
    
        onMounted(() => {
          // 访问组件实例
          console.log(myComponentRef.value); // myComponentRef.value 将是 MyComponent 的实例
          myComponentRef.value.someMethod(); // 调用组件实例上的方法
        });
    
        return {
          myComponentRef,
        };
      },
    };
    </script>
相关推荐
因吹斯汀35 分钟前
一饭封神:当AI厨神遇上你的冰箱,八大菜系大师在线battle!
前端·vue.js·ai编程
再学一点就睡40 分钟前
NATAPP 内网穿透指南:让本地项目轻松 “走出去”
前端
拜无忧40 分钟前
2025最新React项目架构指南:从零到一,为前端小白打造
前端·react.js·typescript
稻草人不怕疼41 分钟前
记一次从“按钮点不动”到“窗口派发缺失”的排查过程
前端
irving同学462381 小时前
TypeORM 列装饰器完整总结
前端·后端·nestjs
彭于晏爱编程1 小时前
你真的了解 Map、Set 嘛
前端
崔璨1 小时前
详解Vue3的响应式系统
前端·vue.js
摸鱼的鱼lv1 小时前
🔥 Vue.js组件通信全攻略:从父子传值到全局状态管理,一篇搞定所有场景!🚀
前端·vue.js
IT_陈寒1 小时前
Java性能优化:10个让你的Spring Boot应用提速300%的隐藏技巧
前端·人工智能·后端
lichong9511 小时前
【混合开发】vue+Android、iPhone、鸿蒙、win、macOS、Linux之dist打包发布在Android工程asserts里
android·vue.js·iphone