vue：slot插槽简单的理解与使用

slot

slot是父组件与子组件的通讯方式，可以将父组件定义的模块显示在子组件中。
使用实例：

显示效果：

父组件代码：

html部分

 <div>
    <h1>slot 父组件</h1>
    <div class="title"></div>
    <SlotComponents :infoData="infoData">
      没有命名的slot会显示这行字吗？？
      <!-- vue 循环数组&循环对象 -->
      <div v-for="(item,index) in arrayData" :key="index">
        <span v-for="(val, key, index) in item" :key="index" :class="key" :slot="key">{{val}}</span>
      </div>
    </SlotComponents>
  </div>

js部分：主要是数据

import SlotComponents from '../components/SlotComponents.vue'
export default {
  components: { SlotComponents },
  data() {
    return {
      infoData: {
        title:'人物列表:  欢迎大家来到王者峡谷~~ 这个里面是props传参',
        array:["name","region","office"]
      },
      arrayData: [
        {
          name: '肖战',
          region: '四川',
          office: '重庆'
        },
        {
          name: '王一博',
          region: '湖南',
          office: '常德'
        },
        {
          name: '安其拉',
          region: '北京',
          office: '昌平'
        },
        {
          name: '庄周',
          region: '下路',
          office: '野区'
        }
      ]
    }
  },

css部分

.title {
  margin: 0 auto;
  height: 40px;
  line-height: 40px;
  color: #777;
  font-size: 20px;
}
.name {
  color: red;
}
.region {
  color: aqua;
}
.office {
  color: blueviolet;
}

子组件代码：

    slot子组件： {{infoData.title}}
    <hr />
    <slot></slot>
    <div v-for="(item,index) in infoData.array" :key="index">
      <slot :name="item"></slot>
    </div>
。。。。。
<script>
export default {
  props: ['infoData'],
  data() {
    return {}
  },
  created() {},
  methods: {}
}
</script>