swiper轮播图组件学习———通过$children获取子组件属性值结果为undefined问题解决

通过this.$children想拿到name的属性值 发现得到的值是undefined

Swiper轮播图组件练习

this.d=this.$children.map(children=>children.name)

以下是代码（末尾有惊喜 ）

第一部分：父子组件之间的嵌套

 <Swiper >  
 <Seiper-item name="item1">    
 <div class="item-
 box1">内容1</div>
 </Seiper-item>    <Seiper-item name="item2">    
 <div class="item-box1">内容2</div>   
 </Seiper-item>   
 <Seiper-item name="item3">   
 <div class="item-box1">内容3</div>   
 </Seiper-item>    
 <Seiper-item name="item4">    
 <div class="item-box1">内容4</div>   
 </Seiper-item>  </Swiper></div>

第二部分：父组件代码（只贴出关键部分代码）

data(){ 
return {  
names:[],  }},
mounted() {  this.names=this.$children.map(children=>children.name)}

第三部分：子组件代码

<template> 
<div class="swiper-item"> 
<slot></slot>  
</div></template>
<script> 
export default
{ name: "SeiperItem", 
}

最后运行的结果是：

最后发现是在子组件中忘记传入name值了 ？？？？？？？

最后第三部分的正确代码如下：

<script> 
export default { 
name: "SeiperItem", 
props:{  
name:{String,      required:true      }  
},  }

暴风式哭泣 我的天啦 因为这 我找了好久的错误 浪费 好多时间 哭泣！！！！！码代码必须细心啊 害~