Vueインスタンスで$refsを使用する際の注意点

開発の過程では、インスタンスの vm.$refs(this.$refs) を使用して、ref で登録されたコンポーネントを取得し、対応する操作を実行することがよくあります。しかし、要素が取得できない場合があります。根本的な原因は、$refs はマウント (レンダリング) された後でのみ要素を取得できることです。

たとえば、この場合、フラグが true 値から false 値に切り替わるとノードを取得できないのは正常です。v-if が false 値の場合、ノードはレンダリングされないためです。

ただし、false 値から true 値に切り替えると、ノードを取得できなくなる可能性があります。これはレンダリングに時間がかかるためです。これは通常、$nextTick() を使用して解決できます。

...
<el-table v-if="フラグ" ref="テーブル">
  <el-table-column prop="prop1"></el-table-column>
  <el-table-column prop="prop2"></el-table-column>
</el-table>
...
 
 
エクスポートデフォルト{
  メソッド: {
    this.$refs.table.XXX()
  }
}

しかし、非常に特殊なケースがあります。ページが初めてレンダリングされるとき、$refs は値を取得できません。このとき、コンポーネント要素を非表示にしたり表示したりするには、v-show を考慮する必要があります。

v-show は CSS display:none によって非表示になっているため、最初にレンダリングされ、要素が確実に取得されます。

補足: Vue.js で ref ($refs) を使用する例とヒント

1. 公式文書による使用法の要約:

Vue.js ドキュメントの ref セクションを参考に、後で参照できるように ref の使い方をまとめました。

1. refは外部コンポーネントで使用される

HTML部分

<div id="ref-outside-component" v-on:click="consoleRef">
  <コンポーネントの親 ref="outsideComponentRef">
  </コンポーネントの父>
  <p>ref は外側のコンポーネントにあります</p>
</div>

js部分

var refoutsidecomponentTem = {
    テンプレート:"<div class='childComp'><h5>私は子コンポーネントです</h5></div>"
  };
  var refoutsidecomponent = 新しいVue({
    el:"#ref-outside-component",
    コンポーネント:{
      "コンポーネントの父":refoutsidecomponentTem
    },
    方法:{
      コンソールRef:関数() {
        console.log(this); // #ref-outside-component vue インスタンス console.log(this.$refs.outsideComponentRef); // div.childComp vue インスタンス }
    }
  });

2. Refは外部要素に使用されます

HTML部分

<!--ref は外側の要素にあります -->
<div id="ref-outside-dom" v-on:click="consoleRef" >
  <コンポーネントの父>
  </コンポーネントの父>
  <p ref="outsideDomRef">ref は外側の要素にあります</p>
</div>

JS部分

var refoutsidedomTem = {
    テンプレート:"<div class='childComp'><h5>私は子コンポーネントです</h5></div>"
  };
  var refoutsidedom = 新しい Vue({
    el:"#ref-outside-dom",
    コンポーネント:{
      "コンポーネントの父":refoutsidedomTem
    },
    方法:{
      コンソールRef:関数() {
        console.log(this); // #ref-outside-dom vue の例 console.log(this.$refs.outsideDomRef); // <p> ref は外側の要素にあります</p>
      }
    }
  });

3. Refは内部の要素に使用されます --- ローカル登録コンポーネント

HTML部分

<!-- 内部の要素を参照 -->
<div id="ref-inside-dom">
  <コンポーネントの父>
  </コンポーネントの父>
  <p>ref は要素内にあります</p>
</div>

JS部分

  var refinsidedomTem = {
    テンプレート:"<div class='childComp' v-on:click='consoleRef'>" +
            「<h5 ref='insideDomRef'>私は子コンポーネントです</h5>」 +
         "</div>",
    方法:{
      コンソールRef:関数() {
        console.log(this); // div.childComp vue インスタンス console.log(this.$refs.insideDomRef); // <h5 >私は子コンポーネントです</h5>
      }
    }
  };
  var refinsidedom = new Vue({
    el:"#ref-inside-dom",
    コンポーネント:{
      "コンポーネントの父":refinsidedomTem
    }
  });

4. Refは内部の要素に使用されます --- グローバル登録コンポーネント

HTML部分

<!-- 要素内の参照 -- グローバル登録 -->
<div id="ref-inside-dom-all">
  <ref-inside-dom-quanjv></ref-inside-dom-quanjv>
</div>

JS部分

  Vue.component("ref-inside-dom-quanjv",{
    テンプレート:"<div class='insideFather'> " +
          "<input type='text' ref='insideDomRefAll' v-on:input='showinsideDomRef'>" +
          " <p>内部の要素の参照 - グローバルに登録</p> " +
         "</div>",
    方法:{
      showinsideDomRef:function() {
        console.log(this); //これは実際にはdiv.insideFatherです
        console.log(this.$refs.insideDomRefAll); // <input type="text">
      }
    }
  });
  var refinsidedomall = new Vue({
    el:"#ref-inside-dom-all"
  });

2. 気をつけるべき落とし穴

1. v-for トラバーサルを通じて異なる参照を追加する場合は、: 記号を追加することを忘れないでください。つまり、:ref = 変数です。

これは他の属性と同じです。固定値の場合は、: 記号を追加する必要はありません。変数の場合は、: 記号を追加することを忘れないでください。

2. :ref = 変数でrefを追加します（つまり:を追加します）。refを取得したい場合は、this.$refs[refsArrayItem] [0]のように[0]を追加する必要があります。:ref = 変数ではなくref = 文字列の場合は、this.$refs[refsArrayItem]のように追加する必要はありません。

追加する場合と追加しない場合の違い [0] - 展開されていない

追加することと追加しないことの違い [0] - 拡大

3. 要素 UI ダイアログボックスが開いた後に DOM を取得する場合は、this.$refs を直接使用するのではなく、$nextTick を使用する必要があります。imgLocal2:

    console.log('this.$refs.imgLocal2 の外側', this.$refs.imgLocal2);
    タイムアウトを設定する(() => {
     console.log('this.$refs.imgLocal2 setTimeout', this.$refs.imgLocal2);
    }, 500); // 推奨されません this.$nextTick(() => {
     console.log('this.$refs.imgLocal2 $nextTick', this.$refs.imgLocal2);
    });