一、Vue的插槽
1、插槽(slot):将父组件中的内容与子组件的模板进行混合使用。可以弥补视图的不足。
2、使用插槽的目的:使组件更具有扩展性。
3、插槽的使用
3.1、匿名插槽(默认插槽):<slot></slot>
有且只能有一个
演示:
Son.vue代码段:
<template>
<div>
<h2>子组件</h2>
<p>西安</p>
<slot></slot>
</div>
</template>
<script>
export default {
name: "Son"
}
</script>
<style scoped>
</style>
Father.vue代码段:
<template>
<div>
<son>
<button>演示按钮</button>
</son>
</div>
</template>
<script>
export default {
name: "Father"
}
</script>
<style scoped>
</style>
App.Vue代码段
import Father from "./components/Father.vue";
<template>
<Father/>
</template>
3.2、具名插槽:当子组件的功能复杂时,子组件的插槽可能并非是一个。每个插槽给个名称
a、子组件中定义插槽:
<slot name="名称"></slot>
b、父组件中使用插槽:<template v-slot:"插槽名"></template>
演示:
Son.vue代码段:
<template>
<div>
<slot name="top"></slot>
<slot name="center"></slot>
<slot name="bottom"></slot>
<slot></slot>
</div>
</template>
<script>
export default {
name: "Son"
}
</script>
<style scoped>
</style>
Father.vue代码段:
<template>
<div>
<Son>
<!-- <button>演示按钮</button>-->
<template v-slot:top>
<button>顶部按钮</button><br/>
</template>
<template v-slot:<