Vue中動態(tài)綁定Ref的兩種方式總結(jié)

更新時間：2024年09月06日 09:51:52 作者：火星大蜘蛛

Vue3中的ref是一種創(chuàng)建響應式引用的方式,它在Vue生態(tài)系統(tǒng)中扮演著重要角色,下面這篇文章主要給大家介紹了關于Vue中動態(tài)綁定Ref的兩種方式,需要的朋友可以參考下

前言

項目中ref綁定是常用的操作，那么如何實現(xiàn)動態(tài)綁定ref并實現(xiàn)動態(tài)獲取呢？動態(tài)綁定的進階寫法又該如何使用？

比如以下需求：

需求：用戶動態(tài)創(chuàng)建多個空白表單，提交時需要獲取當前所有表單數(shù)據(jù)。

一、方式一：利用模板字符串

以下方法定義 Ref 時定義到this.refs中的形式為數(shù)組，這里我們打印一下所有的ref：

可以看到打印的Ref為數(shù)組形式，因此在調(diào)用時應該加上數(shù)組下標

此代碼如下（示例）：

// Html部分（定義Ref）
:ref="'planRef'+item.id"或者
:ref="`planRef${item.id}`"
// Js部分（回調(diào)Ref）
this.$refs[`planRef${item.id}`][0].xxx;

二、方式二：利用箭頭函數(shù)傳入

1.基本聲明

在傳入 Ref 時直接傳入計算函數(shù)，通過此函數(shù)再將創(chuàng)建的 Ref 保存到指定位置，在后續(xù)調(diào)用時就無需使用模板字符串，更直觀也更方便。

代碼如下（示例）：

// Html部分（定義Ref）
:ref="getPlanRef"
// Js部分（定義Ref）、
// 定義存儲計劃Ref的位置，并且在回調(diào)時無需再使用this.$refs
const planRef = ref([]);
// 定義計算函數(shù)方法，將Ref存儲
const getPlanRef = (el) => el && planRef.value.push(el);

2.回調(diào)Ref

在回調(diào)剛剛定義的 Ref 時直接通過xxx.value[ 下標 ]的形式即可

代碼如下（示例）：

// index即為存儲時的順序
planRef.value[index].方法

3.Ref重復存儲問題

在實際使用時，用戶動態(tài)新增表單即動態(tài)新增或刪除 Ref 時 Vue 會觸發(fā)響應更新 Dom ，而我們存儲 Ref 的位置(planRef)并未重置，那么頁面更新后的 Ref 列表將會再次 Push 到 planRef 中，那么就會導致 planRef 中出現(xiàn)重復存儲的 Ref 。

解決思路一：在對Ref進行新增或刪除操作時先刪除當前存儲Ref位置的數(shù)據(jù)，參考代碼如下：

// Ref新增方法
function addPlan() {  
  // 清除存儲Ref位置的數(shù)據(jù)，因為Dom改變會重新獲取
  planRef.value.length = 0;
  // 新增空計劃表
  planList.value.push( 表初始數(shù)據(jù) );
  // 提示語
  modal.msgSuccess('操作成功');
}
// Ref刪除方法
function deletePlan(index) {
  // 清除存儲Ref位置的數(shù)據(jù)，因為Dom改變會重新獲取
  planRef.value.length = 0;
  // 移除需要刪除的計劃表
  planList.value.splice(index, 1);
  // 提示語
  modal.msgSuccess('操作成功');
}

解決思路二（未實踐）：在 Html 部分利用聲明 key 值來避免所有 Dom 動態(tài)更新，但刪除時就需要對存儲 Ref 位置的數(shù)據(jù)進行修改，將要刪除的 Ref 進行移除，這個解決方法僅思路分享不知道是否可行。

附：ref在vfor中的使用

ref用在v-for內(nèi)部時通過this.$refs.name獲得的為一個數(shù)組，可知ref不同于id唯一標識，可以對同類型的dom采用相同的命名，通過vfor的下標獲得具體指向的dom元素

<!-- ref='menuItem'-->
<div ref="menuItem" class="menu_item" v-for="(item,index) in menuData" :key="item.id"
     @click="clickMenu(index)">
  <div class="menu_item_title">
    {{ item.name }}
  </div>
</div>

export default {
  name: 'demo',
  components: {},
  data() {
    return {
      menuData: [
        {id: '0001', name: '菜單一'},
        {id: '0002', name: '菜單二'},
        {id: '0003', name: '菜單三'},
      ],
    }
  },

  watch: {},
  computed: {},
  created() {
  },
  mounted() {
    console.log(this.$refs);
  },

  methods: {
    clickMenu: function (index) {
      //this.$refs['menuItem'][0]、this.$refs['menuItem'][1]、this.$refs['menuItem'][2]分別對應頁面三個dom
      console.log("點擊了下標：" + index, this.$refs['menuItem'][index]);
    }
  }
}