vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue3 ref获取标签dom

vue3 ref如何获取标签dom

作者：可缺不可滥

这篇文章主要介绍了vue3 ref如何获取标签dom问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

概述

在 Vue 中使用 ref 的主要作用是允许你访问和操作 DOM 元素或组件实例。ref 允许你在 Vue 组件中获取对特定 DOM 元素或子组件实例的引用，以便可以进行以下操作：

直接访问和修改 DOM 元素的属性和内容：你可以使用 ref 来访问和修改特定 DOM 元素的属性、样式、内容等。这对于需要直接操作 DOM 元素的情况非常有用，例如，动态改变样式、内容或绑定事件。

访问子组件的实例：如果你在父组件中使用 ref 来引用子组件，你可以访问子组件的属性和方法。这使得父组件可以与子组件进行通信，调用子组件的方法或访问子组件的数据。

vue3代码块

<template>
  <div>
    <input type="text" ref="inputRef" value="1111" />
    <input type="text" ref="input2Ref">
    <span>123</span>
  </div>
</template>

<script>
import { ref, onMounted } from "vue";
export default {
  setup() {
    const inputRef = ref(null);

    onMounted(() => {
      console.log(inputRef.value); /** 这是inputDom */
      console.log(inputRef.value.value) /** 1111 */ 
    });
    return { inputRef };
  },
  mounted() {
    console.log(this.$refs.input2Ref)
  }
};
</script>

<style></style>

ref的本质是转为reactive

ref(18) 转为 reactive({value:18})

所以取值的时候比以前多一个.value。

vue3通过ref获取 子组件的数据或方法

在Vue 3中，可以使用 ref 获取子组件的数据和方法。以下是具体的步骤：

1. 在父组件中设置 ref

首先，在父组件中定义一个 ref，并将其传递给子组件：

<template>
  <div>
    <!-- 通过ref引用子组件 -->
    <ChildComponent ref="childRef" />
    <button @click="callChildMethod">调用子组件方法</button>
  </div>
</template>

<script>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default {
  components: { ChildComponent },
  setup() {
    const childRef = ref(null); // 创建ref以引用子组件

    // 定义调用子组件方法的函数
    const callChildMethod = () => {
      if (childRef.value) {
        childRef.value.someMethod(); // 调用子组件方法
        console.log(childRef.value.someData); // 访问子组件的数据
      }
    };

    return {
      childRef,
      callChildMethod
    };
  }
};
</script>

2. 在子组件中定义方法和数据

在子组件中，将你需要的 data 和 methods 定义为 expose 的内容，这样它们可以在父组件中被访问到：

<template>
  <div>子组件</div>
</template>

<script>
import { ref, defineExpose } from 'vue';

export default {
  setup() {
    const someData = ref('这是子组件的数据');
    
    const someMethod = () => {
      console.log('这是子组件的方法');
    };

    // 使用 defineExpose 暴露数据和方法
    defineExpose({
      someData,
      someMethod
    });

    return {};
  }
};
</script>

解释：

这样设置后，父组件就可以通过 childRef 引用来调用子组件的内容了。

注意

setup的执行期间是在 beforeCreate和created之间执行的，而这个时候dom还未被挂载，所以直接在setup中获取dom是不可能成功的，只能在setup的生命周期onMounted及以后获取dom。

在 Vue 3 中，你也可以通过 this.$refs 来访问这个 DOM 元素的引用，就像在 Vue 2 中一样。

vue2 获取ref

在 Vue 2 中，你可以使用 ref 来获取标签 DOM 元素的引用。以下是一些示例代码，展示如何使用 ref 获取 DOM 元素的引用：

<template>
  <div>
    <button @click="handleClick">获取标签DOM</button>
    <p ref="myParagraph">这是一个段落。</p>
  </div>
</template>

在上面的示例中，我们给 <p> 标签添加了一个 ref 属性，并赋予它一个名称，即 “myParagraph”。现在，我们可以在 Vue 组件中通过 this.$refs 来访问这个 DOM 元素的引用。

<script>
export default {
  methods: {
    handleClick() {
      // 获取DOM元素的引用
      const paragraphElement = this.$refs.myParagraph;
      
      // 在这里可以操作DOM元素
      paragraphElement.style.color = 'red';
    }
  }
}
</script>

在上面的示例中，我们使用 this.$refs.myParagraph 来访问 <p> 标签的 DOM 元素引用，并随后修改了它的文本颜色。这使你能够在 Vue 组件中方便地访问和操作 DOM 元素。

请注意，使用 ref 获取 DOM 元素的引用通常不是 Vue 的首选方式，因为 Vue 更鼓励数据驱动视图。如果可能，尽量使用 Vue 数据绑定和指令来修改视图，而不是直接操作 DOM 元素。然而，有时你可能需要直接访问 DOM 元素，这时 ref 是一个可行的选择。

vue 其它获取dom的方式

在 Vue 中，除了使用 ref 来获取 DOM 元素的引用之外，还可以使用其他方式来获取 DOM 元素。

以下是一些常见的方法：

1.通过 $el 属性：

this.$el.style.color = 'red'; // 修改组件的根元素样式

2.通过事件对象：

methods: {
  handleClick(event) {
    event.target.style.backgroundColor = 'green'; // 修改点击的元素的背景颜色
  }
}

3.使用 document.querySelector 和 document.querySelectorAll：

const element = document.querySelector('#myElement'); // 通过id选择器获取元素
const elements = document.querySelectorAll('.myClass'); // 通过类名选择器获取多个元素

4.通过自定义指令：

这些方法提供了不同的方式来获取和操作 DOM 元素，你可以根据具体的需求和情境选择最适合的方法。不过，在 Vue 中使用 ref 和 $el 是较为常见和方便的方式，特别是在组件内部。

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文