Heim > Web-Frontend > View.js > So erhalten Sie Dom-Elemente in Vue

So erhalten Sie Dom-Elemente in Vue

下次还敢
Freigeben: 2024-04-30 05:30:31
Original
1018 Leute haben es durchsucht

In Vue gibt es folgende Methoden zum Abrufen von DOM-Elementen: 1. Verwenden Sie $refs, um auf Elemente mit ref-Attributen zuzugreifen. 2. Verwenden Sie den Modifikator # in der Vorlage, um Elemente direkt an $refs zu binden 4. Verwenden Sie das Bedienfeld „Komponenten“ von Vue Devtools.

So erhalten Sie Dom-Elemente in Vue

Methoden zum Abrufen von DOM-Elementen in Vue

In Vue können Sie DOM-Elemente über die folgenden Methoden abrufen:

1. $refs

$refs An Attribut ist ein Objekt, das Verweise auf alle Elemente in der Vorlage enthält, die über das Attribut ref verfügen. Verwenden Sie $refs, um direkt auf DOM-Elemente zuzugreifen, wie unten gezeigt: $refs 属性是一个对象,它包含了模板中所有带有 ref 属性的元素的引用。使用 $refs 可以直接访问 DOM 元素,如下所示:

1

2

3

4

5

6

7

8

9

10

11

<code class="vue"><template>

  <div ref="myElement"></div>

</template>

 

<script>

  export default {

    mounted() {

      console.log(this.$refs.myElement); // 输出 DOM 元素

    }

  }

</script></code>

Nach dem Login kopieren

2. 模板中使用 # 修饰符**

# 修饰符可以将模板中的元素直接绑定到组件实例的 $refs 对象中,如下所示:

1

2

3

4

5

6

7

8

9

10

11

<code class="vue"><template>

  <div #myElement></div>

</template>

 

<script>

  export default {

    mounted() {

      console.log(this.$refs.myElement); // 输出 DOM 元素

    }

  }

</script></code>

Nach dem Login kopieren

3. 访问子组件的根 DOM 元素

可以使用 $children 访问子组件,然后可以通过 $el

1

2

3

4

5

6

7

8

9

10

11

<code class="vue"><template>

  <ChildComponent ref="child"></ChildComponent>

</template>

 

<script>

  export default {

    mounted() {

      console.log(this.$refs.child.$el); // 输出子组件的根 DOM 元素

    }

  }

</script></code>

Nach dem Login kopieren

2. Verwenden Sie #

modifier**

# in der Vorlage Der Modifikator kann Elemente in der Vorlage direkt an das Objekt $refs der Komponenteninstanz binden, wie unten gezeigt:
    rrreee
  • 3 Greifen Sie auf das Root-DOM-Element der untergeordneten Komponente zu
  • Sie können $children verwenden, um auf die untergeordnete Komponente zuzugreifen, und dann können Sie das Root-DOM-Element der untergeordneten Komponente über das Attribut $el abrufen, wie unten gezeigt:
  • rrreee
  • 4. Verwendung von Vue Devtools
🎜🎜Vue Devtools ist eine Browsererweiterung, die zur Überprüfung von Vue-Anwendungen verwendet werden kann. In Devtools können Sie über das Bedienfeld „Komponenten“ direkt auf DOM-Elemente zugreifen, wie unten gezeigt: 🎜🎜🎜 Öffnen Sie Vue Devtools 🎜🎜 Wählen Sie das Bedienfeld „Komponenten“ aus 🎜🎜 Suchen Sie die Komponente, die Sie anzeigen möchten 🎜🎜 Im „DOM“ Abschnitt der Komponente, d. h. Sie können die DOM-Elemente dieser Komponente anzeigen🎜🎜

Das obige ist der detaillierte Inhalt vonSo erhalten Sie Dom-Elemente in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
vue
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage