Vue3 で DOM ノードを取得する方法は何ですか?

1. ネイティブ JS で DOM ノードを取得します:

document.querySelector(选择器)
document.getElementById(id选择器)
document.getElementsByClassName(class选择器)
....

2. vue2 の現在のコンポーネントのインスタンス オブジェクトを取得します:

各 vue コンポーネント インスタンスには $refs オブジェクトが含まれているため、この には、対応する DOM 要素またはコンポーネントの参照 が格納されます。したがって、デフォルトでは、コンポーネントの $refs は空のオブジェクトを指します。

まず ref="name" をコンポーネントに追加し、次に this.$refs.name を通じて対応する要素を取得して操作します。

<template>
  <div class="box">
    <h2 ref="divDom">这是一个测试样例</h2>
    <button ref="but">按钮</button>
  </div>
</template>
 
<script>
 
export default {
  data() {
    return {
    }
  },
  methods: {
    showThis(){
      // h2的实例对象 
      console.log(this);
      this.$refs.divDom.style.color=&#39;yellow&#39;
      //引用到组件的实例之后，也可以调用组件上的 methods方法
      this.$refs.but.click();
    },
  },
}
</script>

3. vue3 の現在のコンポーネントのインスタンス オブジェクトを取得します:

このオブジェクトは Vue3 フレームワークでは非アクティブ化されているため、this.$refs を使用してカスタム コンポーネント参照を取得することはできません。 DOM ノード。

しかし、vue3 には現在のコンポーネント インスタンス オブジェクトを返すことができる関数 getCurrentInstance が付属しています。この関数を通じて、オブジェクトを取得してエネルギーを節約し、オブジェクトがインターフェイスに ref を含んでいることを確認できます。 。

rree

以上がVue3 で DOM ノードを取得する方法は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。