<!-- 什么是插槽 ？
*插槽就是子组件中的提供给父组件使用的一个占位符，插槽显不显示、怎样显示是由父组件来控制的，而插槽在哪里显示就由子组件来进行控制。
一般用slot标签来表示插槽要渲染的位置，slot的用法可以分为三类，分别是默认插槽、具名插槽、作用域插槽
父组件向子组件传递内容，内容，内容，注意是 内容！
1、首先，在子组件中定义slot插槽位置（Child.vue 文件中)
2、在父组件中注册子组件，并使用。然后在子组件标签中填写内容，运行后，就会把父组件中填写的
内容，传递到子组件中。
3、如果子组件填写有默认内容，在父组件中没有定义内容，则显示默认的（即子组件的默认值），
如果子组件有填写默认内容，而在父组件中有定义内容，则会覆盖子组件的内容。
总之，slot存在于子组件，v-slot在父组件，最终页面展示结果是父组件！！！
-->
| 父组件 | 子组件 |
|
<template>
<div>
<!-- 覆盖子组件内容 -->
<child>这是内容哦</child>
<!-- 默认显示子组件内容 -->
<child></child>
</div>
<hr>
<!-- 以下是具名插槽的使用 -->
<div>
<child>
<!-- 通过template临时包裹一下信息，然后用v-slot 匹配各自的slot名称
v-slot 可以缩写： #header
-->
<template #header>
<p>这是header1</p>
<p>这是header2</p>
</template>
<template #main>
</template>
<template v-slot:footer>
<p>这是footer</p>
</template>
</child>
</div>
</template>
<script>
import child from '../slot/Child.vue'
export default {
date(){
return{
}
},
//注册组件
components:{
child
}
}
</script>
|
<template>
<div class="box">
<strong>info:</strong>
<slot>说好的,幸福呢</slot>
</div>
<!-- 以下是具名插槽的使用 -->
<!-- 定义不同名称的插槽 header、main、footer -->
<div class="container">
<header>
<slot name="header"></slot>
</header>
<main>
<slot>没有名称的slot</slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
<hr>
<!-- 作用域插槽 -->
<div>
</div>
</template>
<script>
export default {
}
</script>
|
--转载参考：https://cloud.tencent.com/developer/article/2061478
--end--
