一、传递模块
1、父组件
<template>
<slots-base>
<div>
<h1>插槽标题</h1>
<p>插槽内容</p>
</div>
</slots-base>
</template>
<script>
import slotsBase from './slotsBase.vue'
export default {
components: { slotsBase },
}
</script>
<style>
</style>
2、子组件
<template>
<div>
<h3>插槽基础知识</h3>
<slot></slot>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
二、渲染作用域
插槽内容可以访问到父组件的数据作用域,因为插槽内容本身在父组件模板中定义的
父组件
<template>
<slots-base>
<div>
<p>{{ message }}</p>
</div>
</slots-base>
</template>a
<script>
import slotsBase from './slotsBase.vue'
export default {
components: { slotsBase },
data:{
message:"ddddd"
}
}
</script>
<style>
</style>
子组件
<template>
<div>
<slot></slot>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>
三、具名插槽
- v-slot: 与 # 一样
父组件
<template>
<slots-base>
<template #header>
<p>{{ message }}</p>
</template>
<template v-slot:main>
<p>{{ message }}</p>
</template>
</slots-base>
</template>a
<script>
import slotsBase from './slotsBase.vue'
export default {
components: { slotsBase },
data:{
message:"ddddd"
}
}
</script>
<style>
</style>
子组件
<template>
<div>
<slot name="header"></slot>
<hr>
<slot name="main"></slot>
</div>
</template>
<script>
export default {
}
</script>
<style>
</style>