思路

封装一个带有v-for的组件 需要用时只需要调用并实现动态渲染 优点是节约代码 使代码结构更加简洁

1、子组件的封装

<template>
  <ul>
<!-- v-for的基本格式，item：自己定义的单个项目的名字 list：自己定义的数组的名字 -->
    <li v-for="item in list" :key="item">{
         
  { item.name }}</li>
  </ul>
</template>

<script>
export default {
            
     
  name: "yanshi",
  props: {
            
     
//规定list类型为array 即数组，不需要规定数组中变量的类型 
//父组件传给它什么类型就是什么类型
    list: Array,
  },
};
</script>

2、子组件的调用

<script>
// import调用子组件
import yanshi from "./yanshi.vue";

export default {
            
     
name: App, 
// 注册子组件
// tip：一定要使用组件哦！不然会报错哒！
components:{
            
     
    yanshi,
}
}
</script>

3、父组件数据的传输

<template>
  <div>
    <!-- 使用子组件 -->
    <!-- 绑定子组件list 为父组件的要传输的变量的名字（自己定义） -->
    <yanshi :list="fatherListName"></yanshi>
  </div>
</template>

<script>
// import调用子组件
import yanshi from "./yanshi.vue";

export default {
            
     
  name: "App",
//   用data函数返回数组数据
  data() {
            
     
    return {
            
     
        // 这里的fatherListName是自己定义的与子组件那个list绑定的数组，注意区分
        // 注意要写成数组的形式
        fatherListName:[
            {
            
     name:这是数组中第一组数},
            {
            
     name:这是数组中第二组数},
            {
            
     name:这是数组中第三组数},
            {
            
     name:这是数组中第四组数},
        ]
    };
  },
};
</script>

Tip：一定要将v-for写在子组件中

// 要在黑暗的地方努力发光，不是救赎，是蜕变。