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>
相关推荐
前端橙一陈36 分钟前
LocalStorage Token vs HttpOnly Cookie 认证方案
前端·spring boot
~无忧花开~39 分钟前
JavaScript学习笔记(十五):ES6模板字符串使用指南
开发语言·前端·javascript·vue.js·学习·es6·js
泰迪智能科技011 小时前
图书推荐丨Web数据可视化(ECharts 5)(微课版)
前端·信息可视化·echarts
CodeCraft Studio1 小时前
借助Aspose.Email,使用 Python 读取 Outlook MSG 文件
前端·python·outlook·aspose·email·msg·python读取msg文件
家里有只小肥猫3 小时前
react 初体验2
前端·react.js·前端框架
慧慧吖@3 小时前
前端发送请求时,参数的传递格式
前端
L李什么李3 小时前
HTML——使用表格制作简历
前端·javascript·html
未来之窗软件服务3 小时前
万象EXCEL开发(八)excel公式解析与依赖映射 ——东方仙盟金丹期
前端·excel·仙盟创梦ide·东方仙盟·万象excel
linuxxx1103 小时前
ajax() 回调函数参数详解
前端·ajax·okhttp
王嘉俊9253 小时前
ThinkPHP 入门:快速构建 PHP Web 应用的强大框架
开发语言·前端·后端·php·框架·thinkphp