如何使用 Vue 模板引用访问 HTML 元素

Posted on by

在操作 DOM 方面，Vue 为我们提供了许多强大的功能。它简化了维护状态的工作，创建易于维护且使用有趣的 UI。Vue 做得很好的一件事是消除了对直接 DOM 操作的需要。不过，有时我们仍然需要自己操作或引用 DOM 元素。ref幸运的是，Vue 已经想到了这一点，并允许我们使用属性来做到这一点。

在 Vue 中引用 DOM 元素#

虽然当然可以.querySelector()在 Vue 文档上使用，但这不是最佳实践。如果我们想引用一个 DOM 元素，我们可以使用refVue 中的属性。

让我们看一个简单的例子。下面，我们的App.vue页面有一个输入，我们想在我们的一种方法中直接引用该输入：

<template>
    <button id="myButton">Some Button</button>
</template>

<script>
export default {
    mounted: function() {
    }
}
</script>

Vue 可以将 DOM 元素的引用存储在一个名为$ref. 我们要做的第一件事是为我们想要在 Javascript 中引用的元素添加一个 ref 属性。属性的值ref将是它在$ref属性中的名称。

对于我来说，我称之为myButton：

<template>
    <button id="myButton" ref="myButton"></button>
</template>

接下来，在我们的 Javascript 中，我们可以调用该引用，如下所示：

export default {
    mounted: function() {
        console.log(this.$ref.myButton);
    }

这将返回 DOM 元素本身——因此您可以像操作任何 DOM 元素一样操作它。

引用子组件#

如果我们的按钮是一个组件，我们也可以使用相同的想法访问它。例如，假设我们有一个子组件，名为TestComponent. 我们可以ref直接在子组件中添加一个，如下图：

<template>
    <button id="myButton" ref="myButton">Some Button</button>
    <TestComponent ref="anotherButton" />
</template>

<script>

import TestComponent from '../components/TestComponent.vue';

export default {
    components: {
        TestComponent
    },
    mounted: function() {
        // Console logs our "myButton"
        console.log(this.$refs.myButton);
        // Console logs "anotherButton"
        console.log(this.$refs.anotherButton);
    }
}
</script>

上面，我们添加ref到组件本身：

<TestComponent ref="anotherButton" />

这里的不同之处在于它不返回 DOM 元素本身 – 它而是为子组件返回一个对象。

引用子组件的 DOM 元素

由于我们在使用引用时获得了子组件的对象，因此如果我们想访问子组件本身内的 DOM 元素，我们必须使用$el– 来引用组件本身中的 DOM 元素。

// This is the child component reference
this.$refs.anotherButton
// This is the DOM element for the component
this.$refs.anotherButton.$el

引用子组件的方法

由于引用子组件是指整个组件，我们可以使用这个引用来引用它的方法。假设我们的子组件具有如下代码所示的 Javascript。

测试组件.vue

<script>
export default {
    methods: { 
        someFunction: function() {
            console.log('Hello');
        }
    }
}
</script>

在我们的 main,App.vue文件中，我们可以通过我们的引用来引用这个方法。例如：

<template>
    <button id="myButton" ref="myButton">Some Button</button>
    <TestComponent ref="anotherButton" />
</template>

<script>
import TestComponent from '../components/TestComponent.vue';
export default {
    components: {
        TestComponent
    },
    mounted: function() {
        this.$refs.anotherButton.someFunction();
    }
}
</script>

上面，由于我们添加了ref="anotherButton"对子组件的引用，我们可以通过该引用在 Javascript 中引用它。所有方法都可通过此参考获得：

this.$refs.anotherButton.someFunction();

将引用与 v-for 一起使用#

相同的概念适用于v-for. 如果ref在v-for元素上使用 a，则循环生成的每个元素v-for都将作为该引用中的数组返回。

例如，假设我们有以下代码：

<template>
    <ul>
        <li v-for="(item, index) in locations" :key="index" ref="myLocations">{{ item.name }}</li>
    </ul>
</template>

<script>
export default {
    data() {
        return {
            locations: [
                { name: 'London', date: '11/02/2022' },
                { name: 'Paris', date: '12/01/2022' },
                { name: 'Tokyo', date: '04/06/2021' }
            ]
        }
    },
    mounted: function() {
        let liElements = this.$refs.myLocations;
        console.log(liElements);
    }
}
</script>

由于我们已经为我们的元素添加了一个ref调用，我们现在可以通过. 由于它也是一个,将是一个数组。要获得第二个元素，我们将执行以下操作：myLocationslithis.$refs.myLocationv-formyLocationli


this.$refs.myLocations[1];

结论#

Vue 中的引用是访问 Vue 生成的 DOM 元素的强大方法。在 Vue 框架中工作时，它们也是最好的方法。我希望你喜欢这篇文章。更多 Vue 内容，可以在这里找到。

推荐阅读：