VueでDOM要素を取得する方法

Vue では、DOM 要素を取得するメソッドは次のとおりです。 1. $refs を使用して、ref 属性を持つ要素にアクセスします。 2. テンプレート内の # 修飾子を使用して、要素を $refs に直接バインドします。子コンポーネントの el 属性。 4. Vue Devtools の「コンポーネント」パネルを使用します。

Vue で DOM 要素を取得するメソッド

Vue では、次のメソッドを通じて DOM 要素を取得できます。

1. $refs

$refs 属性は、テンプレート内の ref## を持つすべての項目を含むオブジェクトです。 # 属性の要素への参照。以下に示すように、$refs を使用して DOM 要素に直接アクセスします:

<code class="vue"><template>
  <div ref="myElement"></div>
</template>

<script>
  export default {
    mounted() {
      console.log(this.$refs.myElement); // 输出 DOM 元素
    }
  }
</script></code>

2。テンプレートで を使用します。修飾子 **

# 修飾子は、次に示すように、テンプレート内の要素をコンポーネント インスタンスの $refs オブジェクトに直接バインドできます。

<code class="vue"><template>
  <div #myElement></div>
</template>

<script>
  export default {
    mounted() {
      console.log(this.$refs.myElement); // 输出 DOM 元素
    }
  }
</script></code>

3. 子コンポーネント # のルート DOM 要素にアクセスするには、

$children

を使用して子コンポーネントにアクセスし、その後 ## を使用します。 #$el プロパティは、以下に示すように、子コンポーネントのルート DOM 要素を取得します。

<code class="vue"><template>
  <ChildComponent ref="child"></ChildComponent>
</template>

<script>
  export default {
    mounted() {
      console.log(this.$refs.child.$el); // 输出子组件的根 DOM 元素
    }
  }
</script></code>

4. Vue Devtools の使用

Vue Devtools はブラウザです。 Vue アプリを検査するために使用できる拡張機能。 Devtools では、以下に示すように、「コンポーネント」パネルから DOM 要素に直接アクセスできます。

Vue Devtools を開く

「コンポーネント」パネルを選択します。目的のコンポーネントを見つけます。表示されているコンポーネントは、コンポーネントの「DOM」部分にあります。
• コンポーネントの DOM 要素を表示できます。

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