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>
相关推荐
懒大王95271 小时前
echarts+HTML 绘制3d地图,加载散点+散点点击事件
前端·html·echarts
陈皮话梅糖@3 小时前
使用 Provider 和 GetX 实现 Flutter 局部刷新的几个示例
开发语言·javascript·flutter
Yolo@~7 小时前
个人网站:基于html、css、js网页开发界面
javascript·css·html
斯~内克7 小时前
Electron 菜单系统深度解析:从基础到高级实践
前端·javascript·electron
数据知道7 小时前
【YAML】一文掌握 YAML 的详细用法(YAML 备忘速查)
前端·yaml
清风絮柳7 小时前
51. “闲转易”交易平台小程序(基于springboot&vue)
vue.js·spring boot·小程序·毕业设计·校园二手交易平台·二手交易小程序·闲转易交易系统
dr李四维7 小时前
vue生命周期、钩子以及跨域问题简介
前端·javascript·vue.js·websocket·跨域问题·vue生命周期·钩子函数
旭久7 小时前
react+antd中做一个外部按钮新增 表格内部本地新增一条数据并且支持编辑删除(无难度上手)
前端·javascript·react.js
windyrain8 小时前
ant design pro 模版简化工具
前端·react.js·ant design
浪遏8 小时前
我的远程实习(六) | 一个demo讲清Auth.js国外平台登录鉴权👈|nextjs
前端·面试·next.js