slot的使用

具名插槽

<template>
  <div>
    <h3>学校名称：{{schoolName}}</h3>
    <slot name="center">center</slot>
    <slot name="bottom">bottom</slot>
  </div>
</template>

<script>
export default {
    data() {
        return {
            schoolName: 'w3c',
        }
    },
}
</script>

<template>
  <div class="profile">
    <school>
      <div slot="center">我是tm</div>
      <template slot="bottom">
        <ul>
          <li>1111</li>
          <li>2222</li>
          <li>3333</li>
        </ul>
        <h3>哈哈哈</h3>
      </template>
    </school>
  </div>
</template>

<script>
import school from '../components/school.vue';
export default {
  components: {
    school
  },
}

作用域插槽

<template>
  <div>
    <h3>学校名称：{{schoolName}}</h3>
    <slot :list="list" :msg="msg">center</slot>
  </div>
</template>

<script>
export default {
    data() {
        return {
            schoolName: 'w3c',
            list: ['吃饭','看电视','打游戏'],
            msg: '你好啊'
        }
    },
}
</script>

<template>
  <div class="profile">
    <school>
      <template slot-scope='{list,msg}'>
        <h5>{{msg}}</h5>
        <ul>
          <li v-for="(item, index) in list" :key="index">{{item}}</li>
        </ul>
      </template>
    </school>
  </div>
</template>

<script>
import school from '../components/school.vue';
export default {
  components: {
    school
  },
}