具名slot插槽使用

具名slot插槽使用

首先搞个页面放插槽用

<template>
  <div>
    <div>
      <h2>这是上部</h2>
      //放两个插槽，名字分别为a1跟a2
      <slot name="a1"></slot>
      <slot name="a2"></slot>
      <h2>这是下部</h2>
    </div>
  </div>
</template>
<script>
export default {
  name: 'About',
  data() {
    return {}
  }
}
</script>

别的页面去引用这个页面组件并把内容插进去

<template>
//引入组件
  <about>
  //设置对应的槽位
    <div slot="a2">
      <h3>这是第二块</h3>
    </div>
    <div slot="a1">
      <h3>这是第一块</h3>
    </div>
  </about>
</template>
<script>
//引用组件
import about from './views/About'
export default {
//注册组件
  components: { about },
  data() {
    return {}
  }
}
</script>

<style>
</style>

具体效果如下