学习笔记：v-for循环组件

应用

通过实际项目又学到了🙄，离成为dalao又近了一步（不是
重复的元素，不断的复制黏贴会显得代码很臃肿🥱。
那我们第一反应肯定是用循环来实现，可是之前的循环只是循环一些 标签，现在需求却是循环组件
下面看看我实际应用的成果〒▽〒

1.循环组件

// 父组件 
<template>
  <div>
  // 通过父子传值，利用 props 将父组件获取的数据传入子组件 
  // 这边假设 records 是获取的数据
    <child
      v-for="(record, index) in records"
      :id="record.id"
      :index="index"
      :content="record.content"
      ref="sonChild"
      :key="index"
    >
    </child>
  </div>
</template>
<script>
import child from "./child.vue";
export default {
  name: "parent",
  components: {
    child,
  },
  data() {
    return {
      records: {
        0: {
          id: 1,
          content: "第一个内容",
        },
        1: {
          id: 2,
          content: "第二个内容",
        },
      },
    };
  },
};
</script>

// 子组件
<template>
  <div class="child">
    id:{{ id }}, content:{{ content }}, index:{{ index }}
  </div>
</template>
<script>
export default {
  name: "child",
  props: ["id", "index", "content"],
  data() {
    return {};
  },
};
</script>

2.效果图

3.获取子组件

child的ref定义为 ref='sonChild'
通常我们获取组件时使用 this.$refs.sonChild即可获取子组件的dom，
但是for循环组件之后，this.$refs.sonChild获取的是个数组，如下图：

这时候我们想要获得具体的第几个子组件，加上下标就可以了~(っ °Д °;)っ
还在不断的学习中，如果有错误，还望大佬指正~