具名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>
具体效果如下