快捷導(dǎo)航

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

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

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

前言

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

比如以下需求：

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

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

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

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

此代碼如下（示例）：

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

代碼如下（示例）：

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

2.回調(diào)Ref

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

代碼如下（示例）：

// index即為存儲(chǔ)時(shí)的順序
planRef.value[index].方法

3.Ref重復(fù)存儲(chǔ)問題

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

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

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

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

附：ref在vfor中的使用

ref用在v-for內(nèi)部時(shí)通過this.$refs.name獲得的為一個(gè)數(shù)組，可知ref不同于id唯一標(biāo)識(shí)，可以對(duì)同類型的dom采用相同的命名，通過vfor的下標(biāo)獲得具體指向的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]分別對(duì)應(yīng)頁面三個(gè)dom
      console.log("點(diǎn)擊了下標(biāo)：" + index, this.$refs['menuItem'][index]);
    }
  }
}