Vue2: v-for 聯合 ref 使用, 對應引用資訊為陣列

MarkTime: 2024-06-03 00:21:47

LogTime: 2024-11-10 23:25:35

說明

• 問題:

  • 呼叫ref引用的時候, 好奇獲取的時候為什麼 有的返回的是物件, 有的返回的是陣列 (如下圖)

  • 

• 版本:

  • vue: 2.6.14

原始碼

<!--
	已經省略掉大部分程式碼 只保留結構為說明
-->
<template>
  <div class="container" :class="{ flexable: true }"> 
    <template v-slot:right>
      <!-- 左右結構右側tab配置 -->
      <div class="r-tab" v-if="rPageList.length>0 ">
        <el-tabs 
          v-model="rSelectPageId" 
          class="r-flex-tabs"
          :style="{'width': rPageWidth}"
        >
          <el-tab-pane 
            v-for="(item, index) in rPageList" 
            :key="index"
            :label="item.title"
            :name="item.id"
          >
            <component
              style="height: 100%;"
              v-show="rSelectPageId == item.id"
              :ref="rTmplRefs.length!==0 && rTmplRefs[index]['ref']"
              :is="item.pageComponent"
            >
            </component>
          </el-tab-pane>
        </el-tabs>
      </div>
    </template>
  </div>
</template>

<script>
  export default {
    name: "disposal-operation",
      
    date(){
      return {
        rPageList: [], // tab展示元件陣列
        rTmplRefs: [], // 輔助 子元件嵌入ref

        rSelectPageId: '', // 當前展示元件
        rPageWidth: '545px', // 右側寬度
      }
    },
    methods: {
    },
  }
</script>

<style lang="scss" scoped>
  .container {
    position: relative;
    width: 100%;
    &.flexable{
      display: flex;
      align-items: stretch;
    }
    >.cont{
      position: relative;
      &+.cont{
        margin:0 0 0 15px;
      }
    }
    &.vertical{
      flex-direction: column;
      height: 100%;
      >.cont{
        width: 100%;
        &+.cont{
          margin: 15px 0 0 0;
        }
      }
    }
    &.base{
      >.cont{
        &+.cont{
          margin: 0
        }
      }
    }

    .r-tab  {
      height: 100%;
      width: 100%;
      padding-top: 10px;
      .r-flex-tabs {
        height: 100%;
        margin-left: 15px;
      }
    }
  }
  
</style>

<external-component>
  
  <disposal-operation
    ref="disposalOperation"
  >
  </disposal-operation> 
</external-component>

<!--
	1. this.$refs[this.tmplRefs['HANDLE']['ref']] 是由外部元件 external-component 發起的呼叫
	2. 
		this.$refs[this.tmplRefs['HANDLE']['ref']] 
			實際上獲取到的是 disposal-operation 這整個元件的物件
		this.$refs[this.tmplRefs['HANDLE']['ref']].$refs[cParam.to] 
			實際想要獲取到的是 disposal-operation 裡 el-tabs 下迴圈渲染的某個 component
-->

分析

this.$refs[this.tmplRefs['HANDLE']['ref']].$refs[cParam.to] 拆為兩部分來看
由控制檯輸出結果可以直觀看出:
this.$refs[this.tmplRefs['HANDLE']['ref']] 還是物件,
跟上 .$refs[cParam.to] 之後就變成陣列了.

查查Vue框架官網: 能查到這麼一句話:

​ "當 v-for 用於元素或元件的時候，引用資訊將是包含 DOM 節點或元件例項的陣列。"(Vue2-ref)

​ / "When ref is used together with v-for, the ref you get will be an array containing the child components mirroring the data source."(Vue2-Accessing Child Component Instances & Child Elements)

大概意思就是, v-for 聯合 ref 使用, 再使用 this.$refs[component_instance_ref] 獲取到的就是陣列咯