如何利用Vue的“访问DOM元素或子组件？ - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

Vue 中使用 `$refs` 访问 DOM 元素和子组件

大家好，今天我们要深入探讨 Vue.js 中一个非常重要的特性：$refs。它允许我们直接访问组件中的 DOM 元素或子组件实例，为我们提供了在 Vue 数据驱动的响应式世界之外进行操作的桥梁。虽然在 Vue 的设计哲学中，推荐尽量避免直接操作 DOM，但有些场景下，$refs 仍然是不可或缺的。比如，需要直接操作某个原生 DOM 元素进行动画控制、集成第三方库、或是触发子组件的方法。

`$refs` 的基本概念

$refs 是一个对象，它包含了所有使用 ref 属性注册的 DOM 元素或组件实例。简单来说，就是在模板中给一个元素或组件添加 ref 属性，然后在组件实例中就可以通过 $refs 对象访问到它。

基本用法:

在模板中使用 ref 属性: 在需要访问的 DOM 元素或组件上添加 ref 属性，并赋予一个唯一的名称。

<template>
  <div>
    <input type="text" ref="myInput">
    <MyComponent ref="myComponent"></MyComponent>
  </div>
</template>

在组件实例中访问: 在组件的 JavaScript 代码中，通过 this.$refs.refName 来访问对应的 DOM 元素或组件实例。

export default {
  mounted() {
    // 访问 input 元素
    console.log(this.$refs.myInput); // 输出: <input type="text">

    // 访问 MyComponent 组件实例
    console.log(this.$refs.myComponent); // 输出: MyComponent 的组件实例
  }
}

`$refs` 的使用场景和示例

1. 直接操作 DOM 元素

聚焦输入框:

<template>
  <div>
    <input type="text" ref="inputField" @keyup.enter="focusInput">
    <button @click="focusInput">Focus Input</button>
  </div>
</template>

<script>
export default {
  methods: {
    focusInput() {
      this.$refs.inputField.focus();
    }
  }
}
</script>

在这个例子中，我们通过 $refs 获取到 input 元素，并调用其 focus() 方法来设置焦点。 @keyup.enter 是一个键盘事件监听器，当用户在输入框中按下回车键时，也会触发 focusInput 方法。

获取元素尺寸和位置:

<template>
  <div ref="myElement">This is a div.</div>
</template>

<script>
export default {
  mounted() {
    const element = this.$refs.myElement;
    const width = element.offsetWidth;
    const height = element.offsetHeight;
    const rect = element.getBoundingClientRect();

    console.log('Width:', width);
    console.log('Height:', height);
    console.log('Rect:', rect);
  }
}
</script>

这里，我们获取到 div 元素，并使用 offsetWidth 和 offsetHeight 获取其尺寸，使用 getBoundingClientRect() 获取其在视口中的位置信息。

操作视频或音频元素:

<template>
  <video ref="myVideo" src="my-video.mp4" controls></video>
  <button @click="playVideo">Play</button>
  <button @click="pauseVideo">Pause</button>
</template>

<script>
export default {
  methods: {
    playVideo() {
      this.$refs.myVideo.play();
    },
    pauseVideo() {
      this.$refs.myVideo.pause();
    }
  }
}
</script>

这个例子展示了如何使用 $refs 控制视频播放。我们通过 $refs 获取到 video 元素，并调用其 play() 和 pause() 方法来控制视频的播放和暂停。

2. 访问子组件的方法和属性

调用子组件的方法:

// ParentComponent.vue
<template>
  <div>
    <ChildComponent ref="myChild"></ChildComponent>
    <button @click="callChildMethod">Call Child Method</button>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    callChildMethod() {
      this.$refs.myChild.childMethod();
    }
  }
}
</script>

// ChildComponent.vue
<template>
  <div>
    This is a child component.
  </div>
</template>

<script>
export default {
  methods: {
    childMethod() {
      alert('Child method called!');
    }
  }
}
</script>

在这个例子中，父组件通过 $refs 获取到子组件的实例，并调用子组件的 childMethod() 方法。

访问子组件的属性:

// ParentComponent.vue
<template>
  <div>
    <ChildComponent ref="myChild"></ChildComponent>
    <p>Child's Message: {{ childMessage }}</p>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      childMessage: ''
    }
  },
  mounted() {
    this.childMessage = this.$refs.myChild.message;
  }
}
</script>

// ChildComponent.vue
<template>
  <div>
    This is a child component.
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello from child!'
    }
  }
}
</script>

这里，父组件通过 $refs 获取到子组件的实例，并访问子组件的 message 属性。父组件在 mounted 钩子函数中访问子组件的属性，确保子组件已经完成初始化。

3. 集成第三方库

很多第三方库需要直接操作 DOM 元素，例如，使用 Chart.js 创建图表：

<template>
  <div>
    <canvas ref="myChart"></canvas>
  </div>
</template>

<script>
import Chart from 'chart.js/auto';

export default {
  mounted() {
    const ctx = this.$refs.myChart.getContext('2d');
    const chart = new Chart(ctx, {
      type: 'bar',
      data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
          label: '# of Votes',
          data: [12, 19, 3, 5, 2, 3],
          borderWidth: 1
        }]
      },
      options: {
        scales: {
          y: {
            beginAtZero: true
          }
        }
      }
    });
  }
}
</script>

在这个例子中，我们使用 Chart.js 库创建一个柱状图。我们通过 $refs 获取到 canvas 元素，然后将其传递给 Chart.js 构造函数。

4. 实现自定义指令

自定义指令有时也需要直接操作 DOM 元素，比如实现一个自动聚焦的指令：

// directives/focus.js
export default {
  mounted(el) {
    el.focus();
  }
}

// MyComponent.vue
<template>
  <input type="text" v-focus>
</template>

<script>
import focusDirective from './directives/focus.js';

export default {
  directives: {
    focus: focusDirective
  }
}
</script>

虽然这个例子没有直接使用 $refs，但它展示了在需要直接操作 DOM 元素的场景下，自定义指令也是一种常用的解决方案。而 $refs 也常用于在组件内部的特定生命周期内访问指令操作后的DOM元素。

`$refs` 的注意事项

$refs 只在组件渲染完毕后才可用: 这意味着你只能在 mounted 钩子函数或组件更新后访问 $refs。在 created 或 beforeMount 钩子函数中，$refs 对象是空的。
避免过度使用: 尽量使用 Vue 的数据绑定和事件处理机制来操作 DOM。只有在必要时才使用 $refs。过度使用 $refs 会使代码难以维护和测试。
$refs 不是响应式的: 通过 $refs 获取的 DOM 元素或组件实例不是响应式的。这意味着，如果 DOM 元素或组件实例发生了变化，Vue 不会自动更新 $refs 对象。需要手动更新。

动态 v-for 中的 $refs: 当在 v-for 循环中使用 ref 时，$refs 将会是一个数组，包含所有对应的 DOM 元素或组件实例。

<template>
  <ul>
    <li v-for="(item, index) in items" :key="item.id">
      <input type="text" :ref="'itemInput' + index">
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ]
    }
  },
  mounted() {
    // 访问第一个 input 元素
    console.log(this.$refs.itemInput0);

    // 访问所有 input 元素
    for (let i = 0; i < this.items.length; i++) {
      console.log(this.$refs['itemInput' + i]);
    }
  }
}
</script>

或者，更简洁的方式是：

<template>
  <ul>
    <li v-for="(item, index) in items" :key="item.id">
      <input type="text" ref="itemInputs">
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' }
      ]
    }
  },
  mounted() {
    // 访问所有 input 元素
    console.log(this.$refs.itemInputs); // 是一个数组
  }
}
</script>

在函数式组件中 $refs 不可用: 函数式组件没有实例，因此不能使用 $refs。
v-if 条件渲染:
当元素被 v-if 条件渲染移除时，其对应的 $refs 也会变为 undefined。重新渲染后， $refs 会再次可用。

替代方案：响应式数据和事件

在很多情况下，可以使用 Vue 的响应式数据和事件机制来替代 $refs。这样可以避免直接操作 DOM，使代码更简洁、更易于维护。

使用 v-model 进行双向数据绑定:
```
<template>
  <input type="text" v-model="inputValue">
  <p>Input Value: {{ inputValue }}</p>
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    }
  }
}
</script>
```
在这个例子中，我们使用 v-model 将 input 元素的值与 inputValue 数据属性进行双向绑定。这样，当用户在输入框中输入内容时，inputValue 会自动更新，反之亦然。

使用 $emit 触发自定义事件:

// ChildComponent.vue
<template>
  <button @click="sendMessage">Send Message</button>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('message', 'Hello from child!');
    }
  }
}
</script>

// ParentComponent.vue
<template>
  <ChildComponent @message="handleMessage"></ChildComponent>
  <p>Message from Child: {{ message }}</p>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: ''
    }
  },
  methods: {
    handleMessage(msg) {
      this.message = msg;
    }
  }
}
</script>

在这个例子中，子组件通过 $emit 触发一个名为 message 的自定义事件，并将消息作为参数传递给父组件。父组件监听 message 事件，并在 handleMessage 方法中更新 message 数据属性。

`$refs` 在不同 Vue 版本中的差异

在 Vue 2 和 Vue 3 中，$refs 的基本用法是相同的。主要的区别在于 Vue 3 使用了 Proxy 来实现响应式系统，这使得 Vue 3 在性能上更优越。此外， Vue 3 移除了一些不常用的 API，并对一些 API 进行了重命名，但 $refs 的使用方式没有改变。

表格总结 `$refs` 的关键点

特性	描述
用途	访问 DOM 元素或子组件实例
使用方式	在模板中使用 `ref` 属性，然后在组件实例中使用 `this.$refs.refName` 访问。
可用时机	只能在组件渲染完毕后（`mounted` 钩子函数或组件更新后）访问。
响应式	不是响应式的。如果 DOM 元素或组件实例发生了变化，Vue 不会自动更新 `$refs` 对象。
`v-for`	在 `v-for` 循环中使用 `ref` 时，`$refs` 将会是一个数组。
函数式组件	在函数式组件中不可用。
替代方案	尽量使用 Vue 的数据绑定和事件处理机制来替代 `$refs`。
`v-if`	当元素被 `v-if` 条件渲染移除时，其对应的 `$refs` 也会变为 `undefined`。

总结：谨慎使用，合理利用

$refs 是一个强大的工具，但也需要谨慎使用。只有在必要时才使用 $refs，尽量使用 Vue 的数据绑定和事件处理机制。合理利用 $refs 可以帮助我们更好地集成第三方库、实现自定义指令、以及直接操作 DOM 元素，从而构建更灵活、更强大的 Vue.js 应用。

希望今天的讲解对大家有所帮助，谢谢！

Vue 中使用 $refs 访问 DOM 元素和子组件

$refs 的基本概念

$refs 的使用场景和示例