使用 querySelector 和 slot 在 Vue.js 中查找元素

在 Vue.js 中，要找到一个特定的元素时，可能需要使用 querySelector 方法。同时，Vue.js 还提供了一种更加灵活的方式——使用 slot。

querySelector 方法

querySelector 方法是一个浏览器原生的方法，它可以在整个文档中搜索指定的元素，并返回对应的元素。在 Vue.js 中，我们可以使用 this.$el 来访问组件的根 DOM 元素，从而使用 querySelector 方法来查找元素。

以下是一个例子，在 Vue.js 组件中使用 querySelector 方法查找第一个 元素：

mounted() {
  const firstLink = this.$el.querySelector('a');
  console.log(firstLink);
}

slot

在 Vue.js 中，slot 是一种特殊的占位符，用于放置父组件中的内容。slot 可以有不同的名字，以便在具有多个 slot 的组件中进行区分。

以下是一个例子，在父组件中使用 slot：

<!-- 父组件 -->
<template>
  <div>
    <slot name="header"></slot>
    <slot></slot>
    <slot name="footer"></slot>
  </div>
</template>

在子组件中，可以通过使用 slot 元素来在父组件中放置内容：

<!-- 子组件 -->
<template>
  <div>
    <slot name="header">
      <h2>默认标题</h2>
    </slot>
    <p>组件的主要内容</p>
    <slot name="footer"></slot>
  </div>
</template>

在父组件中，可以按照以下方式使用子组件：

<template>
  <div>
    <my-component>
      <template slot="header">
        <h1>自定义标题</h1>
      </template>
      <p>自定义内容</p>
      <template slot="footer">
        <p>自定义页脚</p>
      </template>
    </my-component>
  </div>
</template>

在上述例子中，父组件将分别使用 slot 的名字 'header'、默认的匿名 slot 和 'footer' 来放置子组件中的内容。

使用 querySelector 和 slot 查找元素

在 Vue.js 中，可以将 querySelector 和 slot 结合起来，从而在组件中查找指定的元素。

以下是一个例子，在 Vue.js 组件中使用 querySelector 方法查找第一个具有 'custom-link' class 的 元素：

mounted() {
  const customLink = this.$slots.default[0].elm.querySelector('.custom-link');
  console.log(customLink);
}

在上述例子中，使用 this.$slots.default[0].elm 获取组件的根 DOM 元素。然后，查找具有 'custom-link' class 的第一个 元素。由于在组件的默认 slot 中只有一个元素，因此我们可以使用 [0] 索引来选择该元素。