Nuxt.js中如何通过post.id获取ref父元素下的指定子元素？

嘿，我明白你的困扰——不想给每个子元素都加ref，又想通过post.id精准找到对应的DOM节点对吧？其实不用复杂的方法，利用HTML自定义属性结合DOM选择器就能轻松搞定，而且很适合你当前的场景。

具体步骤： #

1. 在循环的子元素上添加自定义数据属性，把post.id绑定到这个属性上（比如data-post-id）
2. 在doSomething方法里，接收父组件传入的id参数，通过属性选择器从父容器中查找对应的元素

修改后的完整组件代码： #

<template>
  <div ref="parent">
    <!-- 给每个子div添加data-post-id属性，绑定对应的post.id -->
    <div 
      v-for="post in posts" 
      :key="post.id" 
      :data-post-id="post.id"
    >
      {{ post.title }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      posts: [
        {id: 1, title: 'title 1'},
        {id: 5, title: 'title 2'},
        {id: 7, title: 'title 3'}
      ]
    };
  },
  methods: {
    // 接收父组件传入的postId参数
    doSomething(postId){
      // 使用属性选择器，通过data-post-id找到对应的元素
      const targetDiv = this.$refs.parent.querySelector(`[data-post-id="${postId}"]`);
      // 现在你可以操作这个元素了，比如打印看看
      console.log(targetDiv);
    }
  }
};
</script>

为什么这个方法好用？ #

• 不用给每个子元素单独设置ref，避免了大量ref的维护工作
• 自定义数据属性（data-*）是HTML标准特性，兼容性极好
• 通过querySelector查找元素逻辑简单直接，完全匹配你通过id定位的需求

这样父组件调用doSomething的时候，直接传入对应的post.id就可以啦，比如this.$refs.childComponent.doSomething(5)就能拿到id为5的那个子元素~

内容的提问来源于stack exchange，提问作者Akash K.