Vue中动态绑定Ref的两种方式总结

// Html部分（定义Ref）
:ref="'planRef'+item.id"或者
:ref="`planRef${item.id}`"
// Js部分（回调Ref）
this.$refs[`planRef${item.id}`][0].xxx;

// Html部分（定义Ref）
:ref="getPlanRef"
// Js部分（定义Ref）、
// 定义存储计划Ref的位置，并且在回调时无需再使用this.$refs
const planRef = ref([]);
// 定义计算函数方法，将Ref存储
const getPlanRef = (el) => el && planRef.value.push(el);

// index即为存储时的顺序
planRef.value[index].方法

// Ref新增方法
function addPlan() {  
  // 清除存储Ref位置的数据，因为Dom改变会重新获取
  planRef.value.length = 0;
  // 新增空计划表
  planList.value.push( 表初始数据 );
  // 提示语
  modal.msgSuccess('操作成功');
}
// Ref删除方法
function deletePlan(index) {
  // 清除存储Ref位置的数据，因为Dom改变会重新获取
  planRef.value.length = 0;
  // 移除需要删除的计划表
  planList.value.splice(index, 1);
  // 提示语
  modal.msgSuccess('操作成功');
}

<!-- 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]);
    }
  }
}