App.vue:
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<router-view/>
<HelloWorld>
<template v-slot:one>
<h2>一个内容</h2>
</template>
<template v-slot:two>
<h2>两个内容</h2>
</template>
<template v-slot:three>
<h2>三个内容</h2>
</template>
<template>
<h2>四个内容</h2>
</template>
</HelloWorld>
</div>
</template>
<script>
import HelloWorld from "./components/HelloWorld.vue"
export default{
components:{
HelloWorld
}
}
</script>
HelloWorld.vue:
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<slot name='one'></slot>
<slot name='two'></slot>
<slot></slot> <!-- 相当于<slot name='default'></slot> -->
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
</script>