vueでの$refsの使い方と機能

Vue.js の

$ref は、DOM ノードまたはコンポーネント内の要素のサブコンポーネント インスタンスにアクセスできます。その使用法には以下が含まれます: DOM 要素にアクセスし、ref を通じて要素の DOM ノードを直接取得できます。サブコンポーネントのインスタンスにアクセスするには、ref を通じてサブコンポーネントのインスタンス オブジェクトを取得できます。複数の DOM 要素にアクセスするには、$refs 配列を通じて DOM 要素のセットにアクセスします。 $refs の利点は、DOM に直接アクセスし、コンポーネントの通信を実現し、動的制御を実行できることです。ただし、コンポーネントがマウントされた後にのみ使用可能であり、過度に使用すると自動的に更新されないことに注意してください。カップリングが増加しました。

Vue での $refs の使用法と役割

$refs# in Vue.js # # は、コンポーネント内の要素の DOM ノードへのアクセスを許可する特別な属性です。次の使用法を提供します:

1. DOM 要素

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

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

にアクセスします。2. 子コンポーネント インスタンスにアクセスします。

<code class="vue"><template>
  <MyComponent ref="myComponent"></MyComponent>
</template>

<script>
  export default {
    mounted() {
      console.log(this.$refs.myComponent); // 访问子组件实例
    }
  }
</script></code>

3. 複数の DOM 要素にアクセスする

複数の DOM 要素にアクセスするには、

$refs 配列:

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

<script>
  export default {
    mounted() {
      console.log(this.$refs.myElements); // 访问 DOM 元素数组
    }
  }
</script></code>

利点:

• DOM への直接アクセス: getElementById または querySelector と同様に、DOM 要素にアクセスするための簡潔な方法を提供します。
• コンポーネント通信: 親コンポーネントが DOM 要素または子コンポーネントのインスタンスにアクセスして、コンポーネント間の通信を実現できるようにします。
• 動的コントロール: DOM 要素を動的に追加、削除、または変更するために使用できます。

注:

は、コンポーネントがマウントされた
• $refs 後にのみ使用できます。
• $refs は自動的には更新されないため、DOM 要素が変更された場合は手動で更新する必要があります。
コードの結合が増加する可能性があるため、
• $refs を過度に使用することはお勧めできません。

以上がvueでの$refsの使い方と機能の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。