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>
相关推荐
WEI_Gaot3 分钟前
React 19 Props 和 react-icons 和 事件处理函数
前端·react.js
10年前端老司机3 分钟前
微信小程序模板语法和事件
前端·javascript·微信小程序
龙在天3 分钟前
Promise.withResolvers() vs 传统 Promise:谁更胜一筹?
前端
xinhong4 分钟前
Vue3 学习笔记
前端
Evenknow5 分钟前
将"修改源码"改为更专业的"二次开发",体现技术深度
前端·github
khalil5 分钟前
浅析TS枚举与位运算的结合
前端·typescript
yanglei5 分钟前
electron-updater 核心源码解析
前端
攻城狮的大师兄5 分钟前
红宝书(第四版)通读之查漏补缺
javascript
神仙别闹8 分钟前
基于Java+MySQL 实现(Web)日程管理系统
java·前端·mysql
布列瑟农的星空10 分钟前
webworker 实践:外部依赖引入和打包问题
前端·低代码