Vue组件插槽

//值在父组件
<chacao>
      <!-- 可以通过slot定义插槽存放位置 -->
     <ul slot="slots">
        <li v-for="(item,index) in games" :key="index">{{item}}</li>
      </ul>
</chacao>

组件内:
//定义插槽的位置和名称
<slot name="slots"></slot>



//值在子组件内
<!-- 如果数据在子组件 可以通过传值过去  可以传多个 接收的时候是一个数组-->
<slot name="slots" :games="games"></slot>

<chacao>

      <!-- 如果数据在子组件 接收值的地方和props有一点点差别-->
      <template slot="slots" slot-scope="datas">
        <ul>
          <li v-for="(item,index) in datas.games" :key="index">{{item}}</li>
        </ul>
      </template>
</chacao>