vueでの$refsの使い方と機能-Vue.js-php.cn

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

下次还敢

リリース： 2024-05-02 21:33:38

オリジナル

493 人が閲覧しました

Vue.js の

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

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

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 要素を動的に追加、削除、または変更するために使用できます。

注: