Vue之Slot插槽
Vue组件化开发,除了单纯的引用一个组件外,还可以给组件定制化一些特有的东西。组件负责完成基本功能,提供一些Slot插槽,供调用方完成一些特有的功能。Slot中文译为:插槽,可以理解为:插座,可以外接各种电器。Cmp1.vue<template><div>cmp1<hr><Cmp2><...
·
Vue组件化开发,除了单纯的引用一个组件外,还可以给组件定制化一些特有的东西。
组件负责完成基本功能,提供一些Slot插槽,供调用方完成一些特有的功能。
Slot
中文译为:插槽,可以理解为:插座,可以外接各种电器。
Cmp1.vue
<template>
<div>
cmp1
<hr>
<Cmp2>
<p slot="s1">插槽接入1</p>
<p slot="s2">插槽接入2</p>
</Cmp2>
</div>
</template>
<script>
import Cmp2 from "./Cmp2";
export default {
name: "Cmp1",
components:{
Cmp2
}
};
</script>
Cmp2.vue
<template>
<div>
cmp2
<slot name="s1">
插槽1、引用组件插入后我将不会显示
</slot>
<slot name="s2">
插槽2、引用组件插入后我将不会显示
</slot>
</div>
</template>
<script>
export default {
name: "Cmp2"
}
</script>

更多推荐



所有评论(0)