Vue 选择器怎么用？一文详解！

在 Vue 开发中，选择器是一个重要的概念，它用于选取 DOM 元素或组件实例，以便进行操作或绑定事件，Vue 选择器到底怎么用呢？下面我们来详细探讨。

基础选择器

在 Vue 中，最基本的选择器就是 CSS 选择器，如果你有一个 HTML 元素：

```html ```

在 Vue 实例中，你可以通过 `$el` 属性获取根元素（这里是 `id="app"` 的 `div`），而对于子元素，如果你想获取 `class="message"` 的 `p` 元素，可以在 Vue 实例的 `mounted` 钩子中使用 `querySelector` 方法，如下：

```javascript new Vue({ el: '#app', mounted() { const messageElement = this.$el.querySelector('.message'); console.log(messageElement); } }); ```

这里利用了原生 JavaScript 的 `querySelector`，因为 Vue 实例的 `$el` 指向的是挂载的 DOM 元素，所以可以在其基础上使用常见的 DOM 选择方法。

组件选择器

（一）通过 ref 选择组件实例

在 Vue 中，我们经常会用到组件，如果想获取组件实例，可以使用 `ref` 属性，比如有一个子组件 `ChildComponent`：

```html ```

通过给子组件添加 `ref`，在父组件中就可以通过 `this.$refs` 来获取子组件实例，进而操作子组件。

（二）通过组件名称选择（不推荐复杂场景）

在一些简单情况下,我们也可以通过组件名称来选择，比如注册了一个全局组件 `GlobalComponent`：

```javascript Vue.component('global-component', { // 组件选项 }); ```

然后在模板中：

```html ```

在 Vue 实例中可以通过 `$children` 来获取子组件，但这种方式不太可靠，因为 `$children` 的顺序不一定是我们期望的，而且当组件嵌套复杂时，很难准确获取到目标组件，所以一般推荐使用 `ref` 的方式。

选择器的应用场景

（一）操作 DOM 元素

当我们需要对特定的 DOM 元素进行样式修改、事件绑定等操作时，选择器就派上用场了，点击一个按钮后改变某个 `p` 元素的颜色：

```html ``` ### （二）组件间通信

前面提到的通过 `ref` 选择组件实例，很大程度上是为了实现组件间通信，父组件可以调用子组件的方法，传递数据等，例如子组件有一个计算属性 `count`，父组件获取后进行一些操作：

```html ``` ### （三）表单元素操作

对于表单元素,如 `input`、`select` 等，我们也可以通过选择器获取并操作，比如获取 `input` 的值：

```html ```

注意事项

在使用 Vue 选择器时，有一些注意事项，尽量避免在 `mounted` 钩子中立即操作 DOM 元素，因为有时候可能还没完全渲染好，可以使用 `nextTick` 来确保 DOM 更新完成后再操作：

```javascript mounted() { this.$nextTick(() => { const element = this.$el.querySelector('.element'); // 进行操作 }); } ```

对于组件选择,使用 `ref` 要保证在合适的时机获取，比如在 `mounted` 钩子中，因为组件实例在 `mounted` 阶段才完全创建好。

Vue 选择器是 Vue 开发中操作 DOM 元素和组件实例的重要手段，掌握好不同选择器的用法和应用场景，能让我们更高效地开发 Vue 应用，实现各种交互和功能，希望本文能帮助你更好地理解和运用 Vue 选择器。