So erhalten Sie Knoten in Vue

Methoden zum Abrufen von Knoten in Vue: Direkter Zugriff auf DOM-Knoten: Verwenden Sie $el, um auf das Komponentenstammelement zuzugreifen. Verwenden Sie $refs: Um auf die untergeordneten Elemente oder Stammelemente der Komponente zuzugreifen, müssen Sie ref verwenden, um den Namen anzugeben. Verwenden Sie die Render-Funktion: Erstellen Sie das Element in der Render-Funktion und greifen Sie über vm.$vnode auf den DOM-Knoten zu. Mithilfe von Bibliotheken von Drittanbietern wie Vuetify und Element UI kann auf DOM-Knoten über $el bzw. $refs zugegriffen werden.

Wie bekomme ich Knoten in Vue?

Direkter Zugriff auf DOM-Knoten

• $el: Greifen Sie auf das Komponentenstammelement zu. $el: 访问组件根元素。
• $refs: 访问组件的子元素或根元素，需要在模板中使用 ref 属性指定名称。

使用渲染函数

• 在 render 函数中，使用 createElement 函数创建元素，并将其作为 v-node 返回。
• 然后可以通过 vm.$vnode 访问 v-node，进而获取 DOM 节点。

使用第三方的库

• Vuetify: 提供 $el 属性，可以通过 this.$el 访问 DOM 节点。
• Element UI: 提供 $refs 属性，可以通过 this.$refs
$refs: Um auf die untergeordneten Elemente oder Stammelemente der Komponente zuzugreifen, müssen Sie den Namen mithilfe des Attributs ref in der Vorlage angeben.

Renderfunktion verwenden

• In der Funktion render verwenden Sie die Funktion createElement, um das Element zu erstellen und es als v-node zurück. <strong></strong>Dann können Sie über <code>vm.$vnode auf v-node zugreifen, um den DOM-Knoten abzurufen.

• Verwenden Sie Bibliotheken von Drittanbietern

Vuetify: Stellt das Attribut $el bereit, das über this.$el auf DOM-Knoten zugreifen kann.

• Element-Benutzeroberfläche: Stellt das Attribut $refs bereit, das über this.$refs auf DOM-Knoten zugreifen kann.

Beispiel:

<code class="html"><template>
<div id="app">Hello</div>
</template>

<script>
export default {
mounted() {
  console.log(this.$el); // 获取 DOM 节点 <div id="app">
}
}
</script></code>

<code class="html"><template>
<div>Hello</div>
</template>

<script>
export default {
render(h) {
  return h('div', 'Hello');
},
mounted() {
  console.log(this.$vnode.elm); // 获取 DOM 节点 <div>
}
}
</script></code>

<code class="html"><template>
<v-btn ref="button" @click="handleClick">Button</v-btn>
</template>

<script>
import { Button } from 'vuetify';

export default {
components: { Button },
methods: {
  handleClick() {
    console.log(this.$refs.button); // 获取 DOM 节点 <button>
  }
}
}
</script></code>

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