Vue3 組み込み属性

Vue.js では、is、key、ref は 3 つの一般的な組み込み属性であり、使い方は以下のとおりです。

属性 主な機能 使い方/例
is HTML タグの構文制限を解決し、レンダリングするコンポーネント/ネイティブタグを動的に指定する

<タグ is="コンポーネント名">
<component :is="变量">

<ul><li is="my-component"></li></ul>
key Vue 仮想DOMに一意の識別子を提供し、リストレンダリングの効率を向上させ、コンポーネントの状態を正確に保証する <タグ key="一意の値">
<标签 :key="item.id">
<div v-for="item in list" :key="item.id">{{item}}</div>
ref DOM要素またはコンポーネントインスタンスを取得し、ネイティブDOMを直接操作したり、子コンポーネントのメソッドを呼び出したりするために使用する テンプレート: ref="名称"
スクリプト: this.$refs.名称
<input ref="inputRef">
this.$refs.inputRef.focus()

is 属性

Vue.js では、is 属性は通常、動的コンポーネントの実装に使用され、特に実行時に異なるコンポーネントを動的に切り替えたい場合に非常に役立ちます。

  • 型: String または Object
  • 機能: is属性は現在のコンポーネントが<component>どの子コンポーネントをレンダリングするかを動的に指定するために使用されます。通常は<component>要素と動的コンポーネントの特性を組み合わせて使用することで、実行時にデータに基づいて異なるコンポーネントを切り替えることができます。

例

<template>
  <div>
    <component :is="currentComponent"></component>
    <button @click="toggleComponent">Toggle Component</button>
  </div>
</template>

<script>
import FirstComponent from './FirstComponent.vue';
import SecondComponent from './SecondComponent.vue';

export default {
  data() {
    return {
      currentComponent: 'FirstComponent'
    };
  },
  components: {
    FirstComponent,
    SecondComponent
  },
  methods: {
    toggleComponent() {
      this.currentComponent = this.currentComponent === 'FirstComponent' ? 'SecondComponent' : 'FirstComponent';
    }
  }
};
</script>

上記のコードでは、currentComponentはデータ属性であり、それが決定します<component>要素がレンダリングする具体的なコンポーネント。ボタンをクリックすると、toggleComponentメソッドは切り替えますcurrentComponentの値を変更し、レンダリングされるコンポーネントを動的に変更します。

注意事項：

  • 注意事項:
    • is属性の値は、コンポーネントの名前文字列でも、コンポーネントオブジェクトでもかまいません。
    • 文字列を使用する場合、コンポーネント名は登録されたコンポーネント名と一致している必要があります。
    • オブジェクトを使用する場合は、コンポーネントオブジェクトを直接参照するか、動的算出プロパティを使用してコンポーネントオブジェクトを返すことができます。

key 属性

  • 型: String または Number

  • 機能: Vue.js のリストレンダリングでは、各v-forループ内の要素には一意のkey属性が必要です。keyの役割は、Vue が各ノードの一意性を識別し、仮想DOMを効率的に更新できるようにすることです。Vue がリストを再レンダリングするとき、keyに基づいて、既存のDOM要素を再利用するか再作成するかを決定します。

    例

    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>

    上記のコードでは、item.idとしてkey属性として使用することで、各リスト項目がデータ更新時にVueによって正しく識別され処理されることを保証します。

  • 注意事項:

    • keyは一意かつ安定している必要があります。安定しているとは、keyデータの変化に応じて変化すべきではありません。そうしないと、Vue のパフォーマンスと仮想DOMの再利用戦略に影響します。
    • インデックスを key として使用することは避けてください。keyただし、リスト項目の順序が変わらないと明確に分かっている場合を除きます。

ref 属性

  • 型: String または Object

  • 機能: refは、要素または子コンポーネントに参照情報を登録するために使用されます。実際の開発では、refを使用して具体的なDOM要素や子コンポーネントのインスタンスにアクセスし、メソッドの呼び出しやプロパティへのアクセスなどの操作を行うことができます。

DOM要素に ref を追加する

例

<template>
  <div>
    <input type="text" ref="inputField">
  </div>
</template>

<script>
export default {
  mounted() {
console.log(this.$refs.inputField); // DOM要素にアクセス
this.$refs.inputField.focus(); // DOM要素のメソッドを呼び出す
  }
}
</script>

子コンポーネントに ref を追加する

例

<template>
  <div>
    <child-component ref="childRef"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  mounted() {
console.log(this.$refs.childRef); // 子コンポーネントインスタンスにアクセス
this.$refs.childRef.doSomething(); // 子コンポーネントのメソッドを呼び出す
  }
}
</script>

注意事項:

  • テンプレートで使用するref場合、Vue は対応する$refsオブジェクトを提供し、そのオブジェクトを通じて登録されたDOM要素や子コンポーネントインスタンスにアクセスできます。
  • 乱用を避けるref可能な限りデータ駆動とイベント処理を通じてDOMや子コンポーネントを操作し、コードの保守性と明確性を保ちます。
その他の拡張