跳到主要内容

Vue.js模板引用

在 Vue.js 中，模板引用（Template Refs）是一种强大的功能，允许你直接访问 DOM 元素或子组件实例。通过模板引用，你可以在组合式 API 中更灵活地操作 DOM 或与子组件进行交互。本文将详细介绍如何使用模板引用，并通过实际案例帮助你理解其应用场景。

什么是模板引用？​

模板引用是 Vue.js 提供的一种机制，允许你在模板中为 DOM 元素或组件实例分配一个唯一的引用标识符。通过这个标识符，你可以在 JavaScript 代码中直接访问该元素或组件实例。

在组合式 API 中，模板引用通常通过 ref 函数来创建，并通过 ref 属性绑定到模板中的元素或组件上。

如何使用模板引用？​

1. 创建模板引用​

首先，你需要在 setup 函数中使用 ref 函数创建一个引用变量。这个变量将用于存储对 DOM 元素或组件实例的引用。

javascript
import { ref, onMounted } from 'vue';

export default {
  setup() {
    const myElement = ref(null);

    onMounted(() => {
      console.log(myElement.value); // 输出 DOM 元素
    });

    return {
      myElement,
    };
  },
};

2. 绑定模板引用​

接下来，你需要在模板中使用 ref 属性将引用变量绑定到目标元素或组件上。

html
<template>
  <div ref="myElement">
    这是一个 DOM 元素
  </div>
</template>

在这个例子中，myElement 引用变量将指向 div 元素。当组件挂载后，myElement.value 将包含对该 div 元素的引用。

3. 访问模板引用​

在 onMounted 生命周期钩子中，你可以访问 myElement.value 来操作 DOM 元素。例如，你可以修改元素的样式、添加事件监听器或执行其他 DOM 操作。

javascript
onMounted(() => {
  myElement.value.style.color = 'red';
});

实际应用场景​

1. 聚焦输入框​

一个常见的应用场景是在页面加载时自动聚焦输入框。通过模板引用，你可以轻松实现这一功能。

javascript
import { ref, onMounted } from 'vue';

export default {
  setup() {
    const inputElement = ref(null);

    onMounted(() => {
      inputElement.value.focus();
    });

    return {
      inputElement,
    };
  },
};
html
<template>
  <input ref="inputElement" type="text" placeholder="请输入内容" />
</template>

2. 与子组件交互​

模板引用还可以用于与子组件进行交互。例如，你可以通过引用调用子组件的方法或访问其属性。

javascript
import { ref } from 'vue';

export default {
  setup() {
    const childComponent = ref(null);

    const callChildMethod = () => {
      childComponent.value.someMethod();
    };

    return {
      childComponent,
      callChildMethod,
    };
  },
};
html
<template>
  <ChildComponent ref="childComponent" />
  <button @click="callChildMethod">调用子组件方法</button>
</template>

总结​

模板引用是 Vue.js 组合式 API 中一个非常有用的功能，它允许你直接访问 DOM 元素或组件实例。通过 ref 函数和 ref 属性，你可以轻松创建和使用模板引用。在实际开发中，模板引用常用于聚焦输入框、与子组件交互等场景。

附加资源​

练习​

  1. 创建一个 Vue 组件，使用模板引用在页面加载时自动聚焦一个输入框。
  2. 修改上述组件，使其在点击按钮时改变输入框的背景颜色。
  3. 创建一个父组件和一个子组件，使用模板引用在父组件中调用子组件的方法。

通过完成这些练习，你将更好地掌握 Vue.js 模板引用的使用。