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>
相关推荐
Whoisshutiao5 分钟前
网安-XSS-pikachu
前端·安全·网络安全
惊鸿28711 分钟前
Taro3+小程序Canvas动态生成海报和二维码分享到朋友圈
前端
蓝翔认证10级掘手16 分钟前
🤯 家人们谁懂啊!我的摸鱼脚本它...它成精了!🚀
javascript
做梦都在学习前端18 分钟前
发布一个monaco-editor 汉化包
前端·npm·vite
石小石Orz34 分钟前
为什么推荐前端学习油猴脚本开发?
前端
珵煜ini37 分钟前
wd-button组件阻止事件冒泡的
前端
炒毛豆38 分钟前
vue3.4中的v-model的用法~
前端·vue.js
用户408128120038138 分钟前
大文件分片上传和断点续传
前端
极客悟道39 分钟前
颠覆传统虚拟化:在Docker容器中运行Windows系统的开源黑科技
前端·后端
前端康师傅40 分钟前
JavaScript 中你不知道的按位运算
前端·javascript