:ref 和 this.$refs 的区别及 $ 的作用

news2025/3/25 12:07:26

:ref

在 Vue 模板中，:ref 这种写法是使用了 Vue 的动态绑定语法（: 是 v-bind: 的缩写）。ref 是一个特殊的属性，用于给元素或组件注册引用信息。当你使用 :ref 时，通常是在动态地为元素或组件设置引用名称，例如在循环中为每个元素或组件分配不同的引用名。

this.$refs

在 Vue 实例的 script 部分，this.$refs 是一个对象，它存储了所有通过 ref 属性注册的元素或组件的引用。$ 是 Vue 实例的一个特殊前缀，用于区分 Vue 实例自带的属性和方法与用户自定义的属性和方法。this.$refs 是 Vue 提供的一个内置属性，用于访问这些引用。

示例说明

<template>
  <div>
    <!-- 静态绑定 ref -->
    <input ref="myInput" type="text">
    <!-- 动态绑定 ref -->
    <input :ref="dynamicRefName" type="text">
  </div>
</template>

<script>
export default {
  data() {
    return {
      dynamicRefName: 'dynamicInput'
    };
  },
  mounted() {
    // 通过 this.$refs 访问静态绑定的输入框
    console.log(this.$refs.myInput);
    // 通过 this.$refs 访问动态绑定的输入框
    console.log(this.$refs.dynamicInput);
  }
};
</script>

2. 动态绑定是否可以绑定任意属性到标签上

在 Vue 中，动态绑定（v-bind 或其缩写 :）可以绑定大部分 HTML 属性和 Vue 组件的自定义属性，但有一些限制和特殊情况需要注意：

可以动态绑定的属性

HTML 属性：如 id、class、style、src、href 等。

<template>
  <img :src="imageUrl" alt="动态图片">
</template>

<script>
export default {
  data() {
    return {
      imageUrl: 'https://example.com/image.jpg'
    };
  }
};
</script>

组件自定义属性：在组件中定义的 props 可以通过动态绑定传递值。

<template>
  <MyComponent :propName="propValue"></MyComponent>
</template>

<script>
import MyComponent from './MyComponent.vue';

export default {
  components: {
    MyComponent
  },
  data() {
    return {
      propValue: '动态传递的值'
    };
  }
};
</script>